@bytebrand/fe-ui-core 4.8.110 → 4.8.112

package/source/components/_common/PropertySelector/ProperySelector.story.js

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import PropertySelector from './PropertySelector';
+import { CONTAINER_STYLES, ROW_STYLES, COLUMN_STYLES } from '../../../framework/constants';
+import { EXTERIOR_COLORS } from '../../../framework/constants/selectors';
+
+const renderColors = () => EXTERIOR_COLORS.map((color, index) => {
+  const props = {
+    type: 'color',
+    checked: index === 2 || index === 3,
+    name: color,
+    value: color,
+
+    content: color,
+    label: <span>wow so label. <b>much content</b></span>,
+
+    tooltip: 'some text here',
+    onChange: action('change')
+  };
+
+  return index < 5 ? (
+    <div key={index} style={ROW_STYLES}>
+      <PropertySelector {...props} />
+    </div>
+  ) : false;
+});
+
+const renderIcons = () => {
+  const props = {
+    type: 'icon',
+    name: 'icon',
+    checked: true,
+    label: <span>wow so label. <b>much content</b></span>,
+
+    content: <span></span>,
+    onChange: action('change')
+  };
+
+  return (
+    <div style={ROW_STYLES}>
+      <PropertySelector {...props} />
+    </div>
+  );
+};
+
+const renderText = () => [...Array(5)].map((item, index) => {
+  const props = {
+    type: 'text',
+    checked: index === 1,
+    name: index,
+
+    content: index === 0 ? 'All' : index,
+    label: <span>wow so label. <b>much content</b></span>,
+
+    tooltip: 'some text here',
+    onChange: action('change')
+  };
+
+  return (
+    <div key={index} style={ROW_STYLES}>
+      <PropertySelector {...props} />
+    </div>
+  );
+});
+
+
+storiesOf('_Common_UI', module)
+  .add('PropertySelector', () => (
+    <div style={CONTAINER_STYLES}>
+      <div style={COLUMN_STYLES}>
+        {renderColors()}
+      </div>
+      <div style={COLUMN_STYLES}>
+        {renderIcons()}
+      </div>
+      <div style={COLUMN_STYLES}>
+        {renderText()}
+      </div>
+    </div>
+  ));

package/source/components/_common/Radio/FormRadioGroup.story.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Radio from './Radio';
+import FormRadioGroup from './FormRadioGroup';
+import styles from './FormRadioGroup.story.styl';
+
+const mockField = {
+  name: 'availability',
+  value: 'always',
+  error: 'Something went wrong',
+  hasError: true,
+  onChange: action('FormRadioGroup change'),
+  bind: () => {
+    const { bind, ...rest } = mockField;
+    return rest;
+  }
+};
+
+storiesOf('_Common_UI', module)
+.add('FormRadioGroup', () => (
+  <FormRadioGroup field={mockField} childClassName={styles.child}>
+    <Radio label='Available always' value='always'/>
+    <Radio label='Available from' value='fromDate'/>
+    <Radio label='Unknown' value='unknown' disabled={true}/>
+  </FormRadioGroup>
+));

package/source/components/_common/Radio/FormRadioGroup.story.styl

@@ -0,0 +1,2 @@
+.child
+  margin-right: 20px

package/source/components/_common/Radio/Radio.story.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ROW_STYLES, COLUMN_STYLES } from '../../../framework/constants';
+import Radio from './Radio';
+import RadioGroup from './RadioGroup';
+//import FormCheckbox from './FormCheckbox';
+
+//import styles from './Checkbox.story.styl';
+
+// Props related to FormCheckbox stories
+//const basePropsForm = {
+//  field: { bind: () => { } },
+//  label: 'Some label here'
+//};
+//
+//const withErrorForm = {
+//  field: { bind: () => { }, hasError: true, error: 'Something went wrong'},
+//  label: 'Some label here',
+//};
+
+
+// Props related to the Checkbox stories
+const baseProps = {
+  name: 'bitch',
+  checked: false,
+  value: 'some bitchy value',
+  label: <span>wow, so label!</span>,
+
+  onChange: action('checkbox change'),
+  onFocus: action('checkbox focus'),
+  onBlur: action('checkbox blur')
+};
+
+storiesOf('_Common_UI', module)
+.add('Radio', () => (
+  <div>
+    <div style={ROW_STYLES}>
+      <div style={COLUMN_STYLES}>
+        <Radio {...baseProps} checked={true} />
+      </div>
+      <div style={COLUMN_STYLES}>
+        <Radio {...baseProps} disabled={true} />
+      </div>
+      <div style={COLUMN_STYLES}>
+        <Radio {...baseProps} error={true} />
+      </div>
+      <div style={COLUMN_STYLES}>
+        <Radio {...baseProps} checked={true} disabled={true} />
+      </div>
+    </div>
+  </div>
+));

package/source/components/_common/Radio/RadioGroup.story.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Radio from './Radio';
+import RadioGroup from './RadioGroup';
+
+import styles from './RadioGroup.story.styl';
+
+export class RadioGroupDefault extends React.Component {
+  state = {
+    value: 'always'
+  };
+  action = action('change');
+
+  onChange = (event, value) => {
+    this.action(event, value);
+    this.setState(() => ({ value }));
+  };
+
+  render() {
+    return (
+      <RadioGroup name='availability' containerClassName={styles.default} value={this.state.value} onChange={this.onChange}>
+        <Radio label='Available always' value='always' />
+        <Radio label='Available from' value='fromDate' />
+        <Radio label='Unknown' value='unknown' disabled={true} />
+      </RadioGroup>
+    );
+  }
+}
+
+export class RadioGroupVertical extends React.Component {
+  state = {
+    value: 'M_Sport'
+  };
+
+  action = action('change');
+  onChange = (event, value) => {
+    this.action(event, value);
+    this.setState(() => ({ value }));
+  };
+
+  renderSubModel = (index) => {
+    const models = ['320 | 2.0 | Automatic', '320 | 2.0 | Diesel', '320 | 2.0'];
+
+    return (
+      <div className={styles.equipment}>
+        <div className={styles.column}>
+          <span className={styles.value}>
+            {models[index]}
+          </span>
+        </div>
+        <div className={styles.column}>
+          <span className={styles.title}>
+            Power
+          </span>
+          <span className={styles.value}>
+            184 PS / 138 KW
+          </span>
+        </div>
+        <div className={styles.column}>
+          <span className={styles.title}>
+            Built by
+          </span>
+          <span className={styles.value}>
+            7/2015 – 12/2018
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  render() {
+    return (
+      <RadioGroup name='sub_model' containerClassName={styles.vertical} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
+        <Radio label={this.renderSubModel(0)} value='M_Sport' />
+        <Radio label={this.renderSubModel(1)} value='M_Sport_Coupe' />
+        <Radio label={this.renderSubModel(2)} value='M_Sport_Diesel' />
+      </RadioGroup>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+.add('RadioGroup', () => (
+  <div>
+    <RadioGroupDefault />
+    <RadioGroupVertical />
+  </div>
+));

package/source/components/_common/Radio/RadioGroup.story.styl

@@ -0,0 +1,39 @@
+.default
+  border: 1px solid lightgray
+  padding: 10px
+  border-radius: 5px
+  margin-bottom: 20px
+  display: flex
+  flex-direction: row
+  align-items: center
+  justify-content: space-between
+
+.vertical
+  composes: default
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding: 10px
+
+.verticalChild:not(:last-of-type)
+  margin-bottom: 10px
+
+.equipment
+  display: flex
+  flex-direction: row
+  align-items: center
+  justify-content: space-between
+  min-width: 500px
+
+.column
+  display: flex
+  flex-direction: column
+  align-items: stretch
+  width: 150px
+
+.title
+  font-size: 10px
+
+.value
+  font-size: 14px
+

package/source/components/_common/Range/Range.story.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Range from './Range';
+import { Tooltip } from '@mui/material';
+
+import styles from './Range.story.styl';
+
+const RangeWrapper = () => {
+  const [value, setValue] = useState(300);
+
+  const onChange = (value) => {
+    setValue(value);
+    action('onChange');
+  };
+
+  const ValueLabelComponent = (props) => {
+    const { children, value } = props;
+
+    return (
+      <Tooltip enterTouchDelay={0} placement='top' title={value}>
+        {children}
+      </Tooltip>
+    );
+  };
+
+  const props = {
+    value,
+    components: {
+      ValueLabel: ValueLabelComponent
+    },
+    onChange,
+    min: 0,
+    max: 10000,
+    step: 100
+  };
+  return (
+    <div className={styles.container}>
+      <Range {...props} />
+    </div>
+  );
+};
+
+storiesOf('_Common_UI', module)
+  .add('Range', () => <RangeWrapper />);

package/source/components/_common/Range/Range.story.styl

@@ -0,0 +1,5 @@
+.container
+  width: 300px
+  height: 100px
+  background-color #fff;
+  padding: 15px;

package/source/components/_common/SliderArrow/SliderArrow.story.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import SliderArrow from './SliderArrow';
+
+
+const props = {
+  direction: 'left',
+  onClick: action('slider arrow clicked')
+};
+
+storiesOf('_Common_UI', module)
+  .add('SliderArrow', () => (
+    <div>
+      <SliderArrow {...props} />
+    </div>
+  ));

package/source/components/_common/Tabs/Tabs.story.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import TabsComponent from './Tabs.tsx';
+
+
+const wrapperProps = {
+  border: '1px solid rgba(0,0,0,0.1)',
+  borderRadius: '2px',
+  backgroundColor: '#fff'
+};
+
+const resizableProps = {
+  defaultSize: { width: 'auto', height: 'auto' }
+};
+
+const TabsStory = () => {
+  const [priceTabActiveIndex, setNewIndex] = useState(0);
+
+  const onTabPriceSelect = (event, priceTabActiveIndex) => {
+    setNewIndex(priceTabActiveIndex);
+  };
+
+  const tabsProps = {
+    priceTabActiveIndex,
+    onTabPriceSelect,
+    tabsTitles: [{
+      title: 'financing',
+      children: <span>financing</span>
+    }, {
+      title: 'leasing',
+      children: <span>leasing</span>
+    }, {
+      title: 'buy',
+      children: <span>buy</span>
+    }, {
+      title: 'abo',
+      isDisable: true,
+      children: <span>abo</span>
+    }],
+  };
+
+  return (
+    <>
+    <p>Tabs on CDP</p>
+    <div style={wrapperProps}>
+      <Resizable {...resizableProps}>
+        <TabsComponent {...tabsProps} />
+      </Resizable>
+    </div>
+    </>
+  );
+};
+
+storiesOf('_Common_UI', module).add('Tabs', () => <TabsStory />);

package/source/components/_common/TimePicker/TimePicker.story.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+
+import { storiesOf } from '@storybook/react';
+import TimePicker from './TimePicker';
+
+const TimePickerStory = () => {
+  const [time, setTime] = useState(0);
+  const [day, setDay] = useState(0);
+  const [timestamp, setTimestamp] = useState('');
+
+  const onHandleTimeChange = (value) => {
+    setTime(value)
+    };
+  const onHandleDayChange = (value) => {
+    setDay(value)
+    };
+  const onHandleTimestampChange = (value) => {
+    setTimestamp(new Date(value))
+    };
+  return (
+      <TimePicker
+        style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', width: '800px' }}
+        time={time}
+        day={day}
+        onHandleTimeChange={onHandleTimeChange}
+        onHandleDayChange={onHandleDayChange}
+        onHandleTimestampChange={onHandleTimestampChange}
+        lang='de'
+        t={phrase => phrase}
+      />
+  )
+}
+
+storiesOf('_Common_UI', module)
+  .add('TimePicker', () => (
+    <div style={{ background: '#fff', width: '350px', height: '100%' }}><TimePickerStory /></div>
+  ));

package/source/components/_common/Tooltip/Tooltip.story.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import Tooltip from './Tooltip';
+
+
+const description = {
+    financing: `Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.`,
+    leasing: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
+    abo: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil-und Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen. Sie zahlen also nur Ihre Rate und Kraftstoff.`,
+    kaufen: `Nach Kaufabschluss haben Sie die sofortigen Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zueigenen Konditionen weiter verkaufen und Änderungen vornehmen.`,
+};
+
+storiesOf('_Common_UI', module).add('Tooltip', () => (
+    <div>
+      <Tooltip description={description.financing} />
+      <br />
+      <Tooltip description={description.leasing} positionX='left' />
+      <br />
+      <Tooltip description={description.abo} positionX='center' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='right' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='center' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='left' />
+    </div>
+));

package/source/components/_common/UserMenu/MaterialMenu.story.js

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import MaterialMenu from './MaterialMenu';
+
+const superAdmin = false;
+
+const userMenuItems = [
+  {
+    icon: 'dashboardIcon',
+    label: 'Dashboard'
+  },
+  {
+    icon: 'userProfileIcon',
+    label: 'Profile'
+  },
+  {
+    icon: 'addressIcon',
+    label: 'Address'
+  },
+  {
+    icon: 'myVehiclesIcon',
+    label: 'My Vehicles'
+  },
+  {
+    icon: 'savedSearchsIcon',
+    label: 'Saved searchs'
+  },
+  {
+    icon: 'favoritesIcon',
+    label: 'Favorites',
+    amount: 0
+  },
+  !superAdmin && {
+    icon: 'dealersIcon',
+    label: 'Dealers',
+    amount: 1234,
+    divider: true,
+    nestedItems: [
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      },
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      },
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      }
+    ]
+  },
+  {
+    icon: 'imageSettingsIcon',
+    label: 'Image Settings'
+  },
+  !superAdmin && {
+    icon: 'supportCallbackIcon',
+    label: 'Support & Call back',
+    divider: true
+  },
+  {
+    icon: 'logoutIcon',
+    label: 'Logout'
+  },
+
+];
+
+storiesOf('_Common_UI', module).add('UserMenu', () => <MaterialMenu menuItems={userMenuItems} headerComponent='Firstname Lastname' />);

package/source/components/_common/VehicleSlider/VehicleSlider.story.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import styles from './VehicleSlider.story.styl'
+import { storiesOf } from '@storybook/react';
+
+import VehicleSlider from './VehicleSlider.tsx';
+import VehicleSliderForSRL from './VehicleSliderForSRL.tsx';
+
+import withStats from '../withStats/withStats.tsx';
+import withLabel from '../withLabel/withLabel.tsx';
+
+import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
+
+const IMAGE_URL = 'https://picsum.photos/400/300/?random';
+const images = [];
+const imagesForSRL = [];
+
+for (let i = 0; i <= 10; i++) {
+  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
+}
+
+for (let i = 0; i <= 10; i++) {
+  imagesForSRL.push({ imageUrlSmall: `${IMAGE_URL}&tag=${Math.random()}` });
+}
+
+const DecoratedSlider = withLabel(withStats(VehicleSlider));
+const DecoratedSliderForSRL = withLabel(withStats(VehicleSliderForSRL));
+
+export class ImageWithStatsContainer extends React.Component {
+  state = {
+    isFavoured: false
+  };
+
+  onFavoriteClick = () => {
+    this.setState({ isFavoured: !this.state.isFavoured })
+  };
+
+  render() {
+    const statsProps = {
+      isFavoured: this.state.isFavoured,
+      imagesCount: images.length,
+      statsData: {
+        totalCarImpCount: 15,
+        totalFavCount: 20
+      },
+      statsSize: 'xs',
+      onFavoriteClick: this.onFavoriteClick,
+    };
+
+    const sliderProps = {
+      images,
+      wrapperClassName: styles.slider
+    };
+
+    const sliderSRLProps = {
+      images: imagesForSRL,
+      wrapperClassName: styles.slider
+    };
+
+    return (
+      <div style={CONTAINER_STYLES}>
+        <div style={COLUMN_STYLES}>
+          <div style={ROW_STYLES}>
+            <div className={styles.row}>
+              <div className={styles.col}>
+                <h2 className={styles.title}>{'Slider props: { isLarge: true }'}</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <VehicleSlider images={images} wrapperClassName={styles.slider} size='lg' />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.col}>
+                <h2 className={styles.title}>Slider with Stats</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <DecoratedSlider {...statsProps} {...sliderProps} />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.col}>
+                <h2 className={styles.title}>Slider with Stats for SRL</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <DecoratedSliderForSRL {...statsProps} {...sliderSRLProps} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('VehicleSlider', () => (
+    <ImageWithStatsContainer />
+  ));