@bytebrand/fe-ui-core 4.8.54 → 4.8.55

package/source/components/SearchFilters/FiltersFactory.story.js

@@ -0,0 +1,273 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import DropDown from './../_common/DropDown/DropDown';
+import { FiltersFactory } from './FiltersFactory';
+import FilterBlock from './common/FilterBlock/FilterBlock';
+import { DAMAGED_OPTIONS, DOORS, OWNERS_OPTIONS, STATE_OPTIONS } from '../../framework/constants/Search';
+import {
+  BODY_TYPES,
+  DRIVE_TYPES,
+  EMISSION_CLASS,
+  EMISSION_STICKERS,
+  EXTERIOR_COLORS,
+  FUEL_TYPES, HIGHLIGHTS_TYPES, INTERIOR_COLORS, INTERIOR_TYPES, TRANSMISSION_TYPES
+} from '../../framework/constants/selectors';
+import { FIRST_REGISTRATION_HISTOGRAM, MILEAGE_HISTOGRAM, POWER_HISTOGRAM, PRICE_HISTOGRAM } from '../../framework/data';
+import { MMS_GROUPS } from '../../framework/constants/filters';
+
+const t = (phrase, options = {}) => {
+  const dictionary = {
+    'filters.rateTitle': 'Price/Rate',
+    'filters.price': 'Price',
+    'filters.rate': 'Rate',
+    'rateSearchWidget.changeRateLink': 'open',
+    'rateSearchWidget.any': 'any',
+    'rateSearchWidget.defaultValue': 'any, 60 Months',
+    'rateSearchWidget.monthsValue': 'Months Value',
+  };
+  return dictionary[phrase];
+};
+
+const HIGHLIGHTS = {
+  aggregation: {},
+  values: [],
+  options: HIGHLIGHTS_TYPES
+};
+
+const FILTERS = {
+  CONSUMPTION: {
+    values: { from: 1, to: 18 },
+    options: [{ from: 1, to: 18 }],
+    onChange: action('change consumption'),
+    t: () => ''
+  },
+  DAMAGED: {
+    values: '',
+    options: DAMAGED_OPTIONS,
+    onChange: action('change damaged'),
+    t: () => ''
+  },
+  DOORS: {
+    values: '',
+    options: DOORS,
+    onChange: action('change seats'),
+    t: () => ''
+  },
+  DRIVE_TYPE: {
+    aggregation: {},
+    values: [],
+    options: DRIVE_TYPES,
+    onChange: action('change drive type'),
+    t: () => ''
+  },
+  EMISSION_CLASS: {
+    values: '',
+    options: EMISSION_CLASS,
+    onChange: action('change emission class'),
+    t: () => ''
+  },
+  EMISSION_STICKER: {
+    value: '',
+    options: EMISSION_STICKERS,
+    onChange: action('change emission sticker'),
+    t: () => ''
+  },
+  EXTERIOR_COLOR: {
+    name: 'EXTERIOR_COLOR',
+    values: [],
+    options: EXTERIOR_COLORS,
+    onChange: action('change exterior color'),
+    t: () => ''
+  },
+  FIRST_REGISTRATION: {
+    name: 'FIRST_REGISTRATION',
+    values: { from: 1970, to: 2019 },
+    controls: { from: '', to: '' },
+    options: FIRST_REGISTRATION_HISTOGRAM,
+    onChange: action('change first registration'),
+    onChangeControls: action('change first registration'),
+    t: () => ''
+  },
+  FUEL: {
+    aggregation: {},
+    values: [],
+    options: FUEL_TYPES,
+    onChange: action('change fuel'),
+    t: () => ''
+  },
+  HIGHLIGHTS: {
+    HIGHLIGHTS: HIGHLIGHTS,
+    onFilterChange: action('change highlights'),
+    t: () => ''
+  },
+  INTERIOR_COLOR: {
+    name: 'INTERIOR_COLOR',
+    values: [],
+    options: INTERIOR_COLORS,
+    onChange: action('change interior color'),
+    t: () => ''
+  },
+  INTERIOR_TYPE: {
+    aggregation: {},
+    values: [],
+    options: INTERIOR_TYPES,
+    onChange: action('change interior material'),
+    t: () => ''
+  },
+  MAKE_MODEL: {
+    MMS_GROUPS,
+    BODY_TYPE: {
+      options: BODY_TYPES,
+      values: []
+    },
+    onAddMmsGroup: () => { },
+    onRemoveMmsGroup: (index) => { },
+    onChange: (field, value, index, isSeries) => { },
+    t: () => { }
+  },
+  MILEAGE: {
+    name: 'MILEAGE',
+    values: { from: 0, to: 150000 },
+    controls: { from: '', to: '' },
+    options: MILEAGE_HISTOGRAM,
+    onChange: action('change mileage'),
+    onChangeControls: action('change mileage'),
+    t: () => ''
+  },
+  OWNERS: {
+    value: '',
+    options: OWNERS_OPTIONS,
+    onChange: action('change owner'),
+    t: () => ''
+  },
+  POWER: {
+    name: 'POWER',
+    values: { from: 0, to: 600 },
+    controls: { from: '', to: '' },
+    options: POWER_HISTOGRAM,
+    onChange: action('change power'),
+    onChangeControls: action('change power'),
+    t: () => ''
+  },
+  COST: {
+    COST_TYPE: {
+      options: ['price', 'rate'],
+      values: 'rate'
+    },
+    PRICE: {
+      options: PRICE_HISTOGRAM,
+      values: { from: 0, to: 90000 },
+      controls: { from: '', to: '' }
+    },
+    RATE: {
+      values: { monthlyInstallmentFrom: 'any', monthlyInstallmentTo: 'any', firstInstallment: 0, paybackPeriod: 60 }
+    },
+    onChange: action('change'),
+    onChangeControls: action('change'),
+    getRateSearchPrice: (value) => ({ from: 1000, to: 5000 }),
+    t
+  },
+  PRICE: {
+    name: 'PRICE',
+    values: { from: 0, to: 90000 },
+    controls: { from: '', to: '' },
+    options: PRICE_HISTOGRAM,
+    onChange: action('change price'),
+    onChangeControls: action('change price'),
+    t: () => ''
+  },
+  RATE: {
+    values: { monthlyInstallmentFrom: 'any', monthlyInstallmentTo: 'any', firstInstallment: 0, paybackPeriod: 60 },
+    isRateWidgetOpened: false,
+    onRateWidgetOpen: action('widget open'),
+    onRateWidgetClose: action('widget close'),
+    onRateChange: action('change rate'),
+    t
+  },
+  SEATS: {
+    values: { from: 1, to: 12 },
+    options: [{ from: 1, to: 12 }],
+    onChange: action('change seats'),
+    t: () => ''
+  },
+  STATE_OPTIONS: {
+    fieldValues: [],
+    fieldOptions: STATE_OPTIONS,
+    onChange: action('change state'),
+    t: () => ''
+  },
+  TRANSMISSION: {
+    aggregation: {},
+    values: [],
+    options: TRANSMISSION_TYPES,
+    onChange: action('change transmission type'),
+    t: () => ''
+  }
+};
+
+const containerStyles = {
+  width: '280px'
+};
+
+const filterStyles = {
+  marginTop: '20px',
+  paddingTop: '20px',
+  borderTop: '1px solid #005CCB'
+};
+
+// Stateful container for testing interaction
+class FiltersContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeFilter: 'CONSUMPTION'
+    }
+  }
+
+  changeActiveFilter = (filter) => {
+    this.setState(() => ({
+      activeFilter: filter.value
+    }));
+  };
+
+  getOptions = (options) => options.map((option) => ({
+    value: option,
+    label: option
+  }));
+
+  render() {
+    const { activeFilter } = this.state;
+
+    const filterProps = FILTERS[activeFilter];
+    const filters = Object.keys(FILTERS);
+    const component = FiltersFactory[activeFilter](filterProps);
+
+    const ddProps = {
+      options: this.getOptions(filters),
+      onChange: this.changeActiveFilter
+    };
+
+    return (
+      <div>
+        <DropDown {...ddProps} />
+        <div style={filterStyles}>
+          <FilterBlock expand={true}>
+            {component}
+          </FilterBlock>
+        </div>
+      </div>
+    )
+
+  }
+}
+
+storiesOf('FiltersFactory', module)
+  .add('All available filters', () => (
+    <div style={containerStyles}>
+      <FiltersContainer />
+    </div>
+  ));
+
+

package/source/components/SearchPage/Filters/MakeModel/MakeModel.story.js

@@ -0,0 +1,12 @@
+// import React from 'react';
+// import { Resizable } from 're-resizable';
+// import { storiesOf } from '@storybook/react';
+// import { action } from '@storybook/addon-actions';
+
+// import VehicleSmallCardForDealerships from './VehicleSmallCardForDealerships.tsx';
+// import styles from './VehicleSmallCardForDealerships.story.styl';
+
+// storiesOf('MakeModel', module)
+//   .add('MakeModel', () => (
+//     <MakeModelStory />
+//   ));