@bytebrand/fe-ui-core 4.8.48 → 4.8.50

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

@@ -0,0 +1,40 @@
+@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

@@ -0,0 +1,191 @@
+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

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

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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,41 @@
+.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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,85 @@
+@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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,95 @@
+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} />
+  ));