@bytebrand/fe-ui-core 4.8.56 → 4.8.57

package/source/components/SearchWidget/BasicDataWidget/BasicDataWidget.story.styl

@@ -1,40 +0,0 @@
-@import '../../../theme/theme.styl';
-
-.wrapper
-  // position: fixed
-  width: 100%
-  height: 100%
-  left: 0px
-  background-color: red;
-  top: 0px
-  display: flex
-  background-color #CBCBCB
-  font-family: $font-style-arial
-
-.resizable
-  margin-top: 0;
-  width: 375px;
-  padding: 100px;
-
-.propsContainer
-  overflow-y: auto
-
-.title
-  text-align: center
-  font-size: 22px
-  font-weight: bold
-
-.input
-  display: inline-block !important
-  margin-left: 10px
-  position: absolute
-  right: 0
-
-:global
-  .react-checkbox-tree
-    width: 550px
-    margin-right: 10px
-    padding-right: 10px
-  .rct-node
-    margin: 10px 0
-    position: relative

package/source/components/SearchWidget/SearchWidget.story.js

@@ -1,191 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-// Components
-import SearchWidget from './SearchWidget';
-
-// utils
-import { getRequestOptions } from '../../framework/utils/RequestUtils';
-import { buildBodyForRequest, buildQueryForSearch, changeLocation, checkRangeValuesOnEqual } from '../../framework/utils/CommonUtils';
-import { transformManufacturers, transformModelsGeneral } from '../../framework/DataTransformers';
-import { MANUFACTURER, MODEL, THROTTLE_DELAY, RATE_DEFAULT } from '../../framework/constants/SearchWidget';
-import { BODY_TYPES } from '../../framework/constants/selectors';
-
-import styles from './SearchWidget.story.styl';
-
-const containerStyles = {
-  position: 'relative',
-  width: '600px',
-  height: '550px',
-  backgroundImage: 'url("https://dev.autode-static.de/wp-content/uploads/2019/02/startseite_br_tor_AXEL.png")'
-};
-
-const widget = {
-  position: 'absolute',
-  top: '5%',
-  left: '50%',
-  transform: 'translateX(-50%)'
-};
-
-const getCarsCounterUrl = 'https://www.autode-dev.de/service/car-search-endpoint/api/v1/count/car';
-const getManufacturersUrl = 'https://www.autode-dev.de/service/car-makemodel-mapping/api/v1/information/makers';
-const getModelsUrl = 'https://www.autode-dev.de/service/car-makemodel-mapping/api/v1/information/models?maker=';
-
-let timeout = null;
-
-class WidgetContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      counter: 0,
-      counterLoading: true,
-      manufacturers: [],
-      models: [],
-      activeTab: 0,
-      filters: {
-        MANUFACTURER: '',
-        MODEL: '',
-        BODY_TYPE: [],
-        FIRST_REGISTRATION: '',
-        MILEAGE: '',
-        PRICE: { from: '', to: '' },
-        RATE: RATE_DEFAULT
-      }
-    };
-  }
-
-  componentDidMount() {
-    this.getCarsCounter();
-    this.getManufacturers();
-  }
-
-  componentWillUnmount() {
-    timeout = null;
-  }
-
-  onChangeTab = (index) => this.setState(() => ({
-    activeTab: index
-  }));
-
-  onFilterChange = (value, name) => {
-    if (!name) return false;
-    const newState = Object.assign({}, this.state);
-    newState.filters[name] = value;
-
-    if (name === MANUFACTURER) {
-      newState.filters[MODEL] = '';
-      this.getModels(value.value);
-    }
-
-    this.setState(() => (newState), () => {
-      clearTimeout(timeout);
-      timeout = setTimeout(this.getCarsCounter, THROTTLE_DELAY);
-    });
-  };
-
-  onSearchButtonClick = () => {
-    const { filters } = this.state;
-    const query = buildQueryForSearch(filters);
-    const resolvePrefix = query ? `search?${query}` : 'search';
-
-    this.onChangeLocation(resolvePrefix);
-  };
-
-  onChangeLocation = (path) =>
-    changeLocation(path);
-
-  onBrandPanelClick = () => {
-    console.log(this.state.filters[MANUFACTURER]);
-  };
-
-  getManufacturers = () =>
-    fetch(getManufacturersUrl, getRequestOptions('get'))
-      .then((res) => res.json())
-      .then((res) => {
-        const manufacturers = transformManufacturers(res.data);
-        this.updateManufacturersList(manufacturers);
-      })
-      .catch((error) => {
-        throw error;
-      });
-
-  getModels = (maker) =>
-    fetch(`${getModelsUrl}${maker}`, getRequestOptions('get'))
-      .then((res) => res.json())
-      .then((res) => {
-        const models = transformModelsGeneral(res.data);
-        this.setState(() => ({
-          models
-        }));
-      })
-      .catch((error) => {
-        throw error;
-      });
-
-  getCarsCounter = () => {
-    const { filters } = this.state;
-    const data = buildBodyForRequest(filters);
-    const obj = getRequestOptions('post', data);
-    this.setState(() => ({ counterLoading: true }));
-
-    fetch(getCarsCounterUrl, obj)
-      .then((res) => res.json())
-      .then((res) => {
-        this.updateCarCounter(res.count);
-      })
-      .catch((error) => {
-        throw error;
-      });
-  };
-
-  updateManufacturersList = (manufacturers) =>
-    this.setState(() => ({
-      manufacturers
-    }));
-
-  updateCarCounter = (counter) =>
-    this.setState(() => ({
-      counter,
-      counterLoading: false
-    }));
-
-  render() {
-    const { counter, counterLoading, activeTab, manufacturers, models, filters } = this.state;
-
-    const searchWidgetProps = {
-      counter,
-      counterLoading,
-      activeTab,
-      manufacturers,
-      models,
-      bodyTypes: BODY_TYPES,
-      filters,
-      showBottomLinks: false,
-      rateWidgetClassName: styles.rateWidget,
-      onChangeTab: this.onChangeTab,
-      onFilterChange: this.onFilterChange,
-      onSearchButtonClick: this.onSearchButtonClick,
-      onDetailedSearchClick: () => console.log('detailed'),
-      onBrandPanelClick: this.onBrandPanelClick,
-      rateWidgetPosition: 'left'
-    };
-
-    return (
-      <div>
-        <SearchWidget {...searchWidgetProps} />
-      </div>
-    )
-  }
-}
-
-// For testing with api you need run storybook with custom port and host:
-// yarn storybook -p 8080 -h local.autode-dev.de
-storiesOf('SearchWidget', module)
-  .add('default', () => (
-    <div style={containerStyles}>
-      <div style={widget}>
-        <WidgetContainer />
-      </div>
-    </div>
-  ));

package/source/components/SearchWidget/SearchWidget.story.styl

@@ -1,6 +0,0 @@
-@import '../../theme/theme.styl';
-
-.rateWidget
-  background-color: $grey-f2
-  &::before
-    background-color: $grey-f2 !important

package/source/components/Stepper/Stepper.story.js

@@ -1,119 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import {storiesOf} from '@storybook/react';
-
-import Stepper from './Stepper';
-import Step from "./Step/Step";
-import IconSVG from "../_common/IconSVG/IconSVG";
-import Button from "../_common/Button/Button";
-
-import styles from './Stepper.story.styl';
-import stepStyles from './Step/Step.styl';
-
-const maxSteps = 4;
-
-const CustomStep = ({index, title, active, completed, description, onClick}) => {
-  const circleClassName = React.useMemo(() => {
-    return classnames(stepStyles.circle, styles.customCircle, {
-      [styles.active]: active,
-      [styles.completed]: completed
-    });
-  }, [active, completed]);
-
-  const titleClassName = React.useMemo(() => {
-    return classnames(styles.customTitle, {
-      [styles.active]: active,
-      [styles.completed]: completed
-    })
-  }, [active, completed]);
-
-  const descriptionClassName = React.useMemo(() => {
-    return classnames(styles.customDescription, {
-      [styles.active]: active,
-      [styles.completed]: completed
-    })
-  }, [active, completed]);
-
-  return (
-    <div className={stepStyles.container}>
-      <div className={circleClassName} onClick={onClick}>
-        <div className={stepStyles.index}>{index + 1}</div>
-      </div>
-      <div className={titleClassName}>{title}</div>
-      <div className={descriptionClassName}>{description}</div>
-    </div>
-  );
-};
-
-const LinearStepper = () => {
-  const [currentStep, setStep] = React.useState(0);
-  const nextStep = React.useCallback(() => {
-    setStep(currentStep + 1);
-  }, [currentStep]);
-
-  const prevStep = React.useCallback(() => {
-    setStep(currentStep - 1);
-  }, [currentStep]);
-
-  return (
-    <div className={styles.linearStepper}>
-      <div className={styles.title}>Linear stepper</div>
-      <Stepper currentStep={currentStep}>
-        <Step title='First step'/>
-        <Step title='Second step'/>
-        <CustomStep title='Custom step' description={'Description'}/>
-        <Step title='Star step' icon={
-          <IconSVG className={styles.icon} name='star' width='30px' height='30px' customDimensions/>
-        }/>
-      </Stepper>
-      <div className={styles.buttonContainer}>
-        <Button className={styles.button} disabled={currentStep < 1} onClick={prevStep}>Prev</Button>
-        <Button className={styles.button} disabled={currentStep >= maxSteps - 1} onClick={nextStep}>Next</Button>
-      </div>
-    </div>
-  );
-};
-
-const NonLinearStepper = () => {
-  const [currentStep, setStep] = React.useState(0);
-  const [completed, setCompleted] = React.useState(Array(maxSteps).fill(false));
-  const changeCompleted = React.useCallback((complete) => {
-    const array = completed.slice();
-    array[currentStep] = complete;
-    setCompleted(array);
-  }, [currentStep, completed]);
-
-  const complete = React.useCallback(() => {
-    changeCompleted(true);
-  }, [changeCompleted]);
-
-  const reset = React.useCallback(() => {
-    changeCompleted(false);
-  }, [changeCompleted]);
-
-  return (
-    <div>
-      <div className={styles.title}>Non linear stepper</div>
-      <Stepper currentStep={currentStep} nonLinear onStepChange={setStep}>
-        <Step title='First step' completed={completed[0]}/>
-        <Step title='Second step' completed={completed[1]}/>
-        <CustomStep title='Custom step' description={'Description'} completed={completed[2]}/>
-        <Step title='Star step' completed={completed[3]} icon={
-          <IconSVG className={styles.icon} name='star' width='30px' height='30px' customDimensions/>
-        }/>
-      </Stepper>
-      <div className={styles.buttonContainer}>
-        <Button className={styles.button} disabled={completed[currentStep]} onClick={complete}>Complete</Button>
-        <Button className={styles.button} disabled={!completed[currentStep]} onClick={reset}>Reset</Button>
-      </div>
-    </div>
-  );
-};
-
-storiesOf('Stepper', module)
-  .add('default', () => (
-    <div style={{width: 720, height: 576, background: 'white', padding: 20}}>
-      <LinearStepper/>
-      <NonLinearStepper/>
-    </div>
-  ));

package/source/components/Stepper/Stepper.story.styl

@@ -1,41 +0,0 @@
-.customCircle
-  background: #FCE4EC
-
-  &.completed
-    background: #F48FB1
-
-  &.active
-    background: #F06292
-
-.customTitle
-  color: #999
-  font-weight: 600
-
-  &.completed
-    color: #F48FB1
-
-  &.active
-    color: #F06292
-
-.customDescription
-  composes customTitle
-  font-size: 14px
-  font-weight: 400
-
-.linearStepper
-  margin-bottom: 60px
-
-.title
-  margin-bottom: 40px
-  font-size: 20px
-  text-align: center
-
-.icon
-  fill: white
-
-.buttonContainer
-  text-align: center
-
-.button
-  display: inline-block
-  margin: 20px 10px

package/source/components/Theme.story.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { storiesOf } from '@storybook/react';
-
-import styles from './Theme.story.styl';
-
-storiesOf('_Theme', module).
-  add('typography', () => (
-    <div className={styles.baseFont}>
-      <p className={styles.paragraph} style={{ width: '200px' }}>Lorem ipsum — класичний варіант умовного беззмістовного тексту, що вставляється в макет сторінки.</p>
-      <h1 className={styles.heading1}>Lorem ipsum heading 1</h1>
-      <h2 className={styles.heading2}>Lorem ipsum heading 2</h2>
-      <h3 className={styles.heading3}>Lorem ipsum heading 3</h3>
-      <h4 className={styles.heading4}>Lorem ipsum heading 4</h4>
-      <h5 className={styles.heading5}>Lorem ipsum heading 5</h5>
-      <h6 className={styles.heading6}>Lorem ipsum heading 6</h6>
-    </div>
-  ))
-  .add('colors', () => (
-    <div className={styles.baseColor}>
-      <h3 className={styles.heading3}>Primary colors</h3>
-      <div className={styles.container}>
-        <div className={classnames(styles.plate, styles.primaryColor100)} />
-        <div className={classnames(styles.plate, styles.primaryColor70)} />
-        <div className={classnames(styles.plate, styles.primaryColor40)} />
-        <div className={classnames(styles.plate, styles.primaryColor15)} />
-      </div>
-      <h3 className={styles.heading3}>Secondary colors</h3>
-      <div className={styles.container}>
-        <div className={classnames(styles.plate, styles.secondaryColor100)} />
-        <div className={classnames(styles.plate, styles.secondaryColor70)} />
-        <div className={classnames(styles.plate, styles.secondaryColor40)} />
-        <div className={classnames(styles.plate, styles.secondaryColor15)} />
-      </div>
-    </div>
-  ));

package/source/components/Theme.story.styl

@@ -1,85 +0,0 @@
-@import '../theme/theme.styl'
-
-.baseFont
-  font-family: $font-style-arial
-  color: $grey-1
-  font-size: $font-size-default
-
-.paragraph
-  composes: baseFont
-  font-weight: $font-weight-thin
-  font-size: $font-size-paragraph
-
-.heading1
-  composes: baseFont
-  font-size: $font-size-h1
-  font-weight: $font-weight-bolder
-
-.heading2
-  composes: baseFont
-  font-size: $font-size-h2
-  font-weight: $font-weight-bold
-
-.heading3
-  composes: baseFont
-  font-size: $font-size-h3
-  font-weight: $font-weight-bold
-
-.heading4
-  composes: baseFont
-  font-size: $font-size-h4
-  font-weight: $font-weight-medium
-
-.heading5
-  composes: baseFont
-  font-size: $font-size-h5
-  font-weight: $font-weight-normal
-
-.heading6
-  composes: baseFont
-  font-size: $font-size-h6
-  font-weight: $font-weight-normal
-
-
-.baseColor
-  position: relative
-
-.primaryColor100
-  background-color: $primary
-
-.primaryColor70
-  background-color: $primary70
-
-.primaryColor40
-  background-color: $primary40
-
-.primaryColor15
-  background-color: $primary15
-
-.secondaryColor100
-  background-color: $secondary
-
-.secondaryColor70
-  background-color: $secondary70
-
-.secondaryColor40
-  background-color: $secondary40
-
-.secondaryColor15
-  background-color: $secondary15
-
-
-.plate
-  width: 100px
-  height: 70px
-
-.container
-  display: flex
-  flex-direction: row
-  align-items: center
-
-
-
-
-
-

package/source/components/TickerText/TickerText.story.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-// import { action } from '@storybook/addon-actions';
-
-import TickerText from './TickerText';
-
-const props = {
-  text: '+++ Wir sind unverändert für Sie da! +++ Autos bequeme von zu Hause aus kaufen. +++ Wir beraten gern telefonisch und unterstützen Sie dabei das richtige Auto zu finden. +++ Jetzt die großen Rabatte nutzen! +++ Bleiben Sie gesund, wir stehen Ihnen weiterhin mit Rat und Tat zur Seite.',
-  link: 'https://www.auto.de/magazin/online-kauf-in-zeiten-von-covid-19'
-};
-
-storiesOf('TickerText', module)
-  .add('Ticker Text', () => (
-    <div style={{ display: 'flex', justifyContent: 'center', width: '900px' }}>
-      <TickerText {...props} />
-    </div>
-  ));

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection.story.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import OrderStatusSection from './OrderStatusSection';
-
-const orderedCars = [
-  {
-    car: {
-      _id: '1234567890',
-      mainData: {
-        make: 'Volvo',
-        model: 'CX90',
-        subModel: 'sub model',
-      },
-      metaData: {
-        mainImageId: 'main image id'
-      }
-    },
-    buyingType: 'leasing',
-    selfPickup: true,
-    paybackPeriod: 24,
-    monthlyInstallment: 1000,
-    status: 'selector_status_preparation',
-    request: '010203',
-    registration: true,
-    currentSalesPrice: 20000
-  },
-  {
-    car: {
-      _id: '1234567890',
-      mainData: {
-        make: 'Volvo',
-        model: 'CX90',
-        subModel: 'sub model',
-      },
-      metaData: {
-        mainImageId: 'main image id'
-      }
-    },
-    buyingType: 'leasing',
-    selfPickup: false,
-    paybackPeriod: 24,
-    monthlyInstallment: 1000,
-    status: 'selector_status_registration',
-    request: '010203',
-    registration: false,
-    currentSalesPrice: 20000
-  }
-];
-
-const translates = {
-  'orderStatus.title': 'Order status',
-  'orderStatus.selector_status_order_received': 'order received',
-  'orderStatus.selector_status_preparation': 'preparation',
-  'orderStatus.selector_status_registration': 'registration',
-  'orderStatus.selector_status_pick_up': 'pickup',
-  'orderStatus.selector_status_handing_over': 'handing over',
-  'orderStatus.selector_status_delivery': 'delivery',
-  'orderStatus.independentRegistration': 'independent registration',
-  'orderStatus.selector_status_order_received_desc': 'order received description',
-  'orderStatus.selector_status_preparation_desc': 'preparation description',
-  'orderStatus.selector_status_registration_desc': 'registration description',
-  'orderStatus.selector_status_pick_up_desc': 'pickup description',
-  'orderStatus.selector_status_handing_over_desc': 'handing over description',
-  'orderStatus.selector_status_delivery_desc': 'delivery description',
-  'buyingType.buy': 'buy',
-  'buyingType.leasing': 'leasing',
-  'buyingType.financing': 'financing',
-  'paybackPeriod': 'payback period',
-  'currentSalesPrice': 'current sales price',
-  'monthlyInstallment': 'monthly installment'
-}
-
-const t = (phrase, options) => {
-  if (options) {
-    console.log('qqqq options ====', options);
-    const value = Object.values(options).map((option) => option)
-    return `${translates[phrase]} ${value}`;
-  }
-  return translates[phrase];
-}
-
-const props = {
-  t,
-  redirectToCar: (id) => console.log(`redirect to car with id: ${id}`),
-  getSupportedImageFormat: (id, mainImageId, size) => 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp',
-  isFetching: false,
-  withAdditionalInfo: false,
-  orderedCars
-};
-
-storiesOf('userDashboard', module)
-  .add('OrderStatusSection', () => (
-    <OrderStatusSection {...props} />
-  ));