@bytebrand/fe-ui-core 4.8.49 → 4.8.51

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

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import MaterialSwitch from './MaterialSwitch';
+
+const Switch = () => {
+  const [value, setValue] = useState(false);
+
+  const onChange = (checked) => {
+    setValue(checked);
+  };
+
+  return <MaterialSwitch value={value} onChange={onChange} label='switcher' />
+}
+
+
+storiesOf('_Common_UI', module)
+  .add('MaterialSwitch', () => <Switch />)

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

@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import MaterialTooltip from './MaterialTooltip';
+
+const Tooltip = () => {
+  return <MaterialTooltip text='info text' icon='infoIcon' />
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialTooltip', () => <Tooltip />)

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -7,7 +7,7 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { debounce } from 'lodash';
 
 interface IMaterialTooltip {
-  text: string;
+  text: React.ReactNode;
   icon?: string;
   className?: string;
   placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';

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

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import useModal from '../../../framework/hooks/useModal';
+
+import Modal from './Modal';
+
+const ModalComponent = () => {
+  const { isVisible, toggleModal } = useModal();
+  const [modal, setModal] = useState('');
+
+  const onClearModalState = () => {
+    setModal('');
+  };
+
+  const onOpenCookieModal = () => {
+    setModal('PREVIEW_COOKIE_MODAL');
+    toggleModal();
+  };
+
+  const modalProps = {
+    onClearModalState,
+    setModal
+  }
+
+  return (
+    <>
+      <button onClick={onOpenCookieModal}>
+        open modal
+      </button>
+      <Modal isVisible={isVisible} toggleModal={toggleModal} name={modal} modalProps={modalProps} />
+    </>
+  )
+}
+
+
+storiesOf('_Common_UI', module)
+  .add('Modal', () => <ModalComponent />)

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+// Components
+import MuiGroupedSelect from './MuiGroupedSelect';
+
+const resizableProps = {
+  defaultSize: { width: 360, height: 700 }
+};
+
+const MuiFieldWrapper = () => {
+
+  return (
+    <Resizable {...resizableProps}>
+      <MuiGroupedSelect />
+    </Resizable>
+  );
+}
+
+storiesOf('_Common_UI', module)
+  .add('MuiGroupedSelect', () => <MuiFieldWrapper />)

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import PropertySelector from './PropertySelector';
+import PSGroup from './PSGroup';
+
+import styles from './PSGroup.story.styl';
+
+export class PSGroupDefault extends React.Component {
+  state = {
+    value: ['always']
+  };
+  action = action('change');
+
+  onChange = (event, value) => {
+    // value here have to be single string|number or array
+    this.action(event, value);
+    this.setState(() => ({ value }));
+  };
+
+  render() {
+    return (
+      <PSGroup name='availability' behavior='checkbox' value={this.state.value} containerClassName={styles.default} onChange={this.onChange}>
+        <PropertySelector value='1' content='cbd_selector_exterior_color_brown' label='Brown' type='color' />
+        <PropertySelector value='2' content='cbd_selector_exterior_color_blue' label='Blue' type='color' />
+        <PropertySelector value='3' content='cbd_selector_exterior_color_green' label='Green' type='color' disabled={true}  />
+      </PSGroup>
+    );
+  }
+}
+
+export class PSGroupHorizontal 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 (
+      <PSGroup name='sub_model' behavior='radio' containerClassName={styles.horizontal} childClassName={styles.horizontalChild} value={this.state.value} onChange={this.onChange}>
+        <PropertySelector label={this.renderSubModel(0)} value='M_Sport' />
+        <PropertySelector label={this.renderSubModel(1)} value='M_Sport_Coupe' />
+        <PropertySelector label={this.renderSubModel(2)} value='M_Sport_Diesel' />
+      </PSGroup>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+.add('PSGroup', () => (
+  <div>
+    <p className={styles.text}>Checkbox behavior</p>
+    <PSGroupDefault />
+    <p className={styles.text}>Radio button behavior</p>
+    <PSGroupHorizontal />
+  </div>
+));

package/source/components/_common/PropertySelector/PSGroup.story.styl

@@ -0,0 +1,25 @@
+@import '../../../theme/theme.styl'
+
+.default
+  composes: default
+  display: flex
+  flex-direction: column
+
+.horizontal
+  border: 1px solid lightgray
+  padding: 10px
+  border-radius: 5px
+  margin-bottom: 20px
+  display: flex
+  flex-direction: row
+  align-items: center
+  justify-content: space-between
+
+.horizontalChild
+  margin-bottom: 0 !important
+  margin-right: 10px
+
+.text
+  font-family: $font-style-arial
+  font-size: $font-size-h3
+  font-weight: $font-weight-medium

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>
+  ));