@bytebrand/fe-ui-core 4.8.49 → 4.8.51

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import Slider from '@bytebrand/fe-histoslider';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { PRICE_HISTOGRAM } from '../../../framework/data';
+
+// Stateful container for testing interaction
+class HistosliderContainer extends React.Component {
+  state = {
+    selection: null
+  };
+  setSelection = selection => {
+    (() => action("setSelection"))();
+    this.setState({ selection });
+  };
+
+  render() {
+    const histogram = PRICE_HISTOGRAM.map((item) => ({
+      x0: item.from,
+      x: item.to,
+      y: item.count
+    }));
+    const props = {
+      handleLabelFormat: ',.2r',
+      data: histogram,
+      // How much to pad the slider and histogram by, defaults to 20
+      padding: 0,
+      // The extent of the selection, this doesn't have to be sorted (and you shouldn't sort it to store it)
+      selection: this.state.selection,
+      // A function to handle a change in the selection
+      onChange: this.setSelection
+    };
+
+    return (
+      <div>
+        <Slider {...props} />
+        <Slider {...props} disableHistogram />
+      </div>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+.add('Histogram', () => (
+  <div>
+    <HistosliderContainer />
+  </div>
+));
+
+

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import components from './IconSVGConfig';
+
+import { storiesOf } from '@storybook/react';
+
+import IconSVG from './IconSVG';
+import styles from './IconSVG.story.styl';
+
+const iconNames = Object.keys(components);
+
+storiesOf('_Common_UI', module)
+  .add('IconSVG', () => (
+    <div style={{display: 'flex', flexWrap: 'wrap'}}>
+      {iconNames.map((name) => (
+        <div style={{width: '250px', margin: '10px', padding: '10px', border: '1px solid black', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+          <IconSVG customDimensions name={name}/>
+          <div> - {name}</div>
+        </div>
+      ))}
+    </div>
+  ));

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

@@ -0,0 +1,25 @@
+@import '../../../theme/theme.styl'
+
+.wrapper
+  margin-bottom: 10px
+  text-align: center
+
+.camera
+  fill: $grassGreen
+
+.sliderEye
+  fill: $primary
+  width: 3em
+  height: 3em
+
+.star
+  fill: $yellow
+  width: 40px
+  height: 30px
+  stroke: black
+  stroke-width: 1px
+
+.checkBlue
+  fill: $primary
+  width: 3em
+  height: 3em

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import styles from './Image.story.styl'
+import { storiesOf } from '@storybook/react';
+
+import Image from './Image.tsx';
+import {COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES} from '../../../framework/constants';
+
+const SRC_HORIZONTAL = 'https://placekitten.com/150/100';
+const SRC_SQUARE = 'https://placekitten.com/150/150';
+const SRC_VERTICAL = 'https://placekitten.com/100/150';
+
+const SRC_SMALL = 'https://dummyimage.com/3000x2000/000000/fff.png&text=SMALL+IMAGE';
+const SRC_LARGE = 'https://dummyimage.com/3000x2000/eb00eb/ffffff.png&text=LARGE+IMAGE';
+
+storiesOf('_Common_UI', module)
+  .add('Image', () => (
+    <div style={CONTAINER_STYLES}>
+      <div style={COLUMN_STYLES}>
+
+        <div style={ROW_STYLES}>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <h2 className={styles.title}>{`<Image width='100%' ratioW={4} ratioH={3} />`}</h2>
+              <div className={styles.row}>
+                <div className={styles.col}>
+                  <Image srcSmall={SRC_SMALL} srcLarge={SRC_LARGE} width='500px' ratioW={4} ratioH={3} />
+                </div>
+              </div>
+            </div>
+            {/* <div className={styles.col}>
+              <h2 className={styles.title}>{`<Image width='100%' height={200} />`}</h2>
+              <div className={styles.row}>
+                <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                  <Image src={SRC_VERTICAL} width='100%' height={200} />
+                </div>
+              </div>
+            </div> */}
+          </div>
+        </div>
+
+        {/* <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={200} ratioW={4} ratioH={3} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={200} ratioW={4} ratioH={3} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={200} ratioW={4} ratioH={3} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={200} ratioW={4} ratioH={3} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={200} ratioW={11} ratioH={5} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={200} ratioW={11} ratioH={5} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={200} ratioW={11} ratioH={5} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={200} ratioW={11} ratioH={5} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={250} height={200} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={250} height={200} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={250} height={200} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={250} height={200} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={200} height={250} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={200} height={250} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={200} height={250} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={200} height={250} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={200} height={200} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={200} height={200} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={200} height={200} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={200} height={200} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>Error</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src='http://wrong.src.url' width={100} height={100} />
+            </div>
+          </div>
+        </div>*/}
+
+      </div>
+    </div>
+  ));

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

@@ -0,0 +1,18 @@
+.title
+  text-align center
+  margin-top 20px
+  margin-bottom 10px
+  font-size 18px
+
+.row
+  display flex
+  justify-content: space-between
+  flex-wrap: nowrap
+  text-align center
+
+.col
+  margin 0 10px
+
+.label
+  font-size 12px
+  margin-top 10px

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { Resizable } from 're-resizable';
+import ImagesSet from './ImagesSet';
+import styles from './ImagesSet.story.styl';
+
+const PLACEHOLDER_IMAGE_URL = 'https://images.autode-stage.de//noimage/small';
+const IMAGE_URL = 'http://picsum.photos/400/300/?random';
+const images = [];
+for (let i = 0; i <= 7; i++) {
+  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
+}
+
+const resizableProps = {
+  className: styles.resizable,
+  defaultSize: { width: 770, height: 390 }
+};
+
+const imagesSetProps = {
+  images,
+  imageSizes: [2, 1, 1, 2, 1, 1, 1, 2, 1],
+  columnsCount: 4,
+  rowsCount: 3,
+  onImageClick: action('click'),
+  placeholderUrl: PLACEHOLDER_IMAGE_URL
+};
+
+storiesOf('_Common_UI', module)
+  .add('ImagesSet', () => (
+    <Resizable {...resizableProps}>
+      <ImagesSet {...imagesSetProps} />
+    </Resizable>
+  ));

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

@@ -0,0 +1,4 @@
+@import '../../../theme/theme.styl'
+
+.resizable
+  border: 1px solid $grey-e

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import Loader from './Loader.tsx';
+import { CONTAINER_STYLES } from '../../../framework/constants';
+
+
+storiesOf('_Common_UI', module)
+.add('Loader', () => (
+  <div style={CONTAINER_STYLES}>
+    <Loader size='tiny' />
+    <Loader size='small' />
+    <Loader size='medium' />
+    <Loader size='large' />
+
+    <div style={{ width: 40, height: 40 }}>
+      <Loader fluid />
+    </div>
+  </div>
+));

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

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import MaterialAccordionGroup from './MaterialAccordionGroup';
+
+const MaterialAccordionGroupComponent = () => {
+  const [switchValue, setSwitchValue] = useState(false);
+  const handleSwitch = (value) => {
+    setSwitchValue(value);
+  };
+  const switchProps = {
+    value: switchValue,
+    onChange: handleSwitch
+  }
+  return (
+    <>
+      <MaterialAccordionGroup
+        title='Collaps item 1'
+        tooltipText='tooltipText'
+        withSwitch
+        switchProps={switchProps}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+        sit amet blandit leo lobortis eget.
+      </MaterialAccordionGroup>
+      <MaterialAccordionGroup
+        title='collaps item 1'
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+        sit amet blandit leo lobortis eget.
+      </MaterialAccordionGroup>
+      <MaterialAccordionGroup
+        title='collaps item 1'
+        tooltipText='tooltipText 3'
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+        sit amet blandit leo lobortis eget.
+      </MaterialAccordionGroup>
+    </>
+  )
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialAccordionGroup', () => <MaterialAccordionGroupComponent />)

package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.styled.tsx

@@ -1,4 +1,7 @@
-import { styled, createTheme } from '@mui/material/styles';
+import { styled as muiStyled, createTheme } from '@mui/material/styles';
+
+// Cast to any to bypass MUI 5.9 styled() overload mismatch with strict TS in consumers (fe-landing).
+const styled: any = muiStyled;
 
 export const AccordionSummaryContent = styled('div')({
   display: 'flex',

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

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+// Components
+import MaterialDatePicker from './MaterialDatePicker';
+import styles from './MaterialDatePicker.story.styl';
+
+import {
+  _minDate,
+  handleMaxDate,
+} from '../../../framework/utils/DateUtils';
+
+const resizableProps = {
+  defaultSize: {
+    width: 360,
+    height: 700
+  }
+};
+
+const MaterialDatePickerWrapper = () => {
+  const [value, newValue] = useState('');
+
+  const onHandleChange = (value) => {
+    newValue(value);
+  };
+
+  return (
+    <Resizable {...resizableProps}>
+      <div className={styles.wrapper}>
+        <MaterialDatePicker
+          language='en'
+          maxDate={new Date(handleMaxDate())}
+          minDate={_minDate}
+          value={value}
+          error={true}
+          placeholder='Date of Birth DD/MM/YYYY*'
+          onChange={(value) => onHandleChange(value)}
+        />
+      </div>
+    </Resizable>
+  );
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialDatePicker', () => <MaterialDatePickerWrapper />)

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

@@ -0,0 +1,6 @@
+@import '../../../theme/theme.styl'
+
+.wrapper
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 15px;

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

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+import styles from './MaterialField.story.styl';
+// Components
+import MaterialField from './MaterialField';
+
+const resizableProps = {
+  defaultSize: { width: 360, height: 700 }
+};
+
+const MaterialFieldWrapper = () => {
+  const [newData, setNewData] = useState({
+    firstName: '',
+    lastName: '123123',
+    email: '',
+    countryCode: '+49',
+    areaCode: '',
+    phoneNumber: ''
+  });
+
+  const onHandleChange = (value, name) => {
+    setNewData({ ...newData, [name]: value });
+  };
+
+  return (
+    <Resizable {...resizableProps}>
+      <div className={styles.wrapper}>
+        <MaterialField
+          onChange={value => onHandleChange(value, 'firstName')}
+          label='Vorname'
+          value={newData.firstName}
+          className={styles.firstName}
+          error={newData.firstName === '' ? true : false}
+          helperText={newData.firstName === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
+          required
+        />
+        <MaterialField
+          onChange={value => onHandleChange(value, 'lastName')}
+          label='Nachname'
+          value={newData.lastName}
+          className={styles.lastName}
+          error={newData.lastName === '' ? true : false}
+          helperText={newData.lastName === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
+        />
+        <MaterialField
+          onChange={value => onHandleChange(value, 'email')}
+          label='E-Mail Adresse'
+          value={newData.email}
+          className={styles.email}
+          error={newData.email === '' ? true : false}
+          helperText={newData.email === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
+        />
+        <MaterialField
+          onChange={value => onHandleChange(value, 'countryCode')}
+          label='Land'
+          value={newData.countryCode}
+          className={styles.countryCode}
+          error={newData.countryCode === '' ? true : false}
+          helperText={newData.countryCode === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
+        />
+
+        <MaterialField
+          onChange={value => onHandleChange(value, 'areaCode')}
+          label='Vorwahl'
+          value={newData.areaCode}
+          className={styles.areaCode}
+          classNameInputLabel={styles.areaCodeInputLabel}
+          error={newData.areaCode === '' ? true : false}
+          helperText={newData.areaCode === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
+        />
+
+        <MaterialField
+          onChange={value => onHandleChange(value, 'phoneNumber')}
+          label='Telefonnummer'
+          value={newData.phoneNumber}
+          className={styles.phoneNumber}
+          error={newData.phoneNumber === '' ? true : false}
+          helperText={newData.phoneNumber === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
+        />
+      </div>
+    </Resizable>
+  );
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialField', () => <MaterialFieldWrapper />)

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

@@ -0,0 +1,34 @@
+@import '../../../theme/theme.styl'
+
+.wrapper
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 16px
+  display: grid;
+  grid-gap: 24px 16px
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-areas:
+    'firstName firstName lastName lastName'\
+    'email email email email'\
+    'countryCode areaCode phoneNumber phoneNumber'
+
+.firstName
+  grid-area: firstName;
+
+.lastName
+  grid-area: lastName;
+
+.email
+  grid-area: email;
+
+.countryCode
+  grid-area: countryCode;
+
+.areaCode
+  grid-area: areaCode;
+
+.phoneNumber
+  grid-area: phoneNumber;
+
+.areaCodeInputLabel
+  font-size: 13px !important;

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

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+import { MenuItem } from '@mui/material';
+// Components
+import MaterialSelect from './MaterialSelect';
+import styles from './MaterialSelect.story.styl';
+
+const resizableProps = {
+  defaultSize: { width: 360, height: 700 }
+};
+
+// const inputFields = [{
+//   'Vorname',
+//   'Nachname'
+// }]
+
+const MaterialFieldWrapper = () => {
+  const [newData, setNewData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    countryCode: '+49',
+    areaCode: '',
+    phoneNumber: ''
+  });
+
+  const onHandleChange = (event, type) => {
+    setNewData({ ...newData, [type]: event.target.value });
+  };
+
+  return (
+    <Resizable {...resizableProps}>
+      <div className={styles.wrapper}>
+        <MaterialSelect
+          onHandleChange={e => onHandleChange(e, 'firstName')}
+          label='age'
+          value={newData.firstName}
+          error={true}
+          helperText={`We'll never share your email.`}
+        >
+          <MenuItem value={1}>Ten</MenuItem>
+          <MenuItem value={2}>Twenty</MenuItem>
+          <MenuItem value={3}>Thirty</MenuItem>
+        </MaterialSelect>
+      </div>
+    </Resizable>
+  );
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialSelect', () => <MaterialFieldWrapper />)

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

@@ -0,0 +1,6 @@
+@import '../../../theme/theme.styl'
+
+.wrapper
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 16px

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

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+// Components
+import MaterialStepButton from './MaterialStepButton';
+import styles from './MaterialStepButton.story.styl';
+
+import {
+  _minDate,
+  handleMaxDate,
+  checkingWhenLess18Age,
+  createDateAsUTC
+} from '../../../framework/utils/DateUtils';
+
+const resizableProps = {
+  defaultSize: {
+    width: 360,
+    height: 700
+  }
+};
+
+const MaterialStepButtonWrapper = () => {
+  const [value, newValue] = useState('');
+
+  const onHandleChange = (value) => {
+    newValue(value);
+  };
+
+  return (
+    <Resizable {...resizableProps}>
+      <div className={styles.wrapper}>
+        <MaterialStepButton
+          language='en'
+          maxDate={new Date(handleMaxDate())}
+          minDate={_minDate}
+          value={value}
+          error={true}
+          placeholder='Date of Birth DD/MM/YYYY*'
+          onChange={(value) => onHandleChange(createDateAsUTC(value))}
+        />
+      </div>
+    </Resizable>
+  );
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialStepButton', () => <MaterialStepButtonWrapper />)

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

@@ -0,0 +1,6 @@
+@import '../../../theme/theme.styl'
+
+.wrapper
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 15px;