@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/ImageSettings/OptionsTable/OptionsTable.styl

@@ -0,0 +1,47 @@
+@import '../../legacy-theme/theme.styl'
+
+.table
+  font-family: $font-style-arial
+  font-size: 14px
+  border-collapse: collapse
+  background-color: white
+
+  &, & th, & td
+    border: 1px solid #C4C4C4;
+
+  & th, & td
+    text-align: left
+    font-weight: $font-weight-normal
+    padding: 10px
+
+  & th:not(:nth-child(2)),
+  & td:not(:nth-child(2))
+    text-align: center
+
+  & th
+    font-size: 12px
+
+  & th.counts
+    padding: 5px
+    white-space: nowrap
+    font-size: 11.5px
+    color: $grey-9
+
+  & th.packageTitle
+    font-size: 16px
+    font-weight: $font-weight-bold
+
+    &.basic
+      color: white
+      background-color: #C4C4C4
+
+    &.premium
+      color: white
+      background-color: #71CBF4
+
+    &.auto_de_premium
+      color: white
+      background-color: $skyBlue
+
+.icon
+  cursor: pointer

package/compat/ImageSettings/OptionsTable/OptionsTable.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import IconSVG from '../../../iconsvg/IconSVG';
+import { ImageCounts, ImagePackage } from '../index';
+
+import styles from './OptionsTable.styl';
+
+export interface IProps {
+  t: (key: string, options?: object) => string;
+  parentImagePackages: ImagePackage[];
+  customImagePackages?: ImagePackage[];
+  imageCodesByCategories: Map<string, Set<string>>;
+  onShowImages: (imageCodes: string[]) => void;
+  className?: string;
+}
+
+// tslint:disable:align
+const OptionsTable: React.FunctionComponent<IProps> = ({ t, parentImagePackages, customImagePackages, imageCodesByCategories, onShowImages, className }) => {
+  const categoriesPackagesCounts: Map<string, WeakMap<ImagePackage, ImageCounts>> = new Map<string, WeakMap<ImagePackage, ImageCounts>>();
+  const categoriesCounts: Map<string, ImageCounts> = new Map<string, ImageCounts>();
+  const currentImagePackages: ImagePackage[] = [];
+
+  parentImagePackages.forEach((parentImagePackage) => {
+    let currentImagePackage: ImagePackage;
+
+    if (customImagePackages) {
+      currentImagePackage = customImagePackages.find(({ parentId }) => parentId === parentImagePackage.id);
+    }
+
+    if (currentImagePackage === undefined) {
+      currentImagePackage = parentImagePackage;
+    }
+
+    currentImagePackages.push(currentImagePackage);
+
+    currentImagePackage.imagePackageConfigs.forEach(({ category, mandatory, postProcess }) => {
+      if (!categoriesCounts.has(category)) {
+        const imageCodesCount: number = imageCodesByCategories.get(category).size;
+        categoriesCounts.set(category, {
+          mandatoryCount: imageCodesCount,
+          postProcessCount: imageCodesCount
+        });
+      }
+
+      if (!categoriesPackagesCounts.has(category)) {
+        categoriesPackagesCounts.set(category, new WeakMap<ImagePackage, ImageCounts>());
+      }
+
+      const packagesCounts: WeakMap<ImagePackage, ImageCounts> = categoriesPackagesCounts.get(category);
+      if (!packagesCounts.has(currentImagePackage)) {
+        packagesCounts.set(currentImagePackage, {
+          mandatoryCount: 0,
+          postProcessCount: 0
+        });
+      }
+
+      const packageCounts: ImageCounts = packagesCounts.get(currentImagePackage);
+
+      if (mandatory) {
+        packageCounts.mandatoryCount = packageCounts.mandatoryCount + 1;
+      }
+
+      if (postProcess) {
+        packageCounts.postProcessCount = packageCounts.postProcessCount + 1;
+      }
+    });
+  });
+
+  return (
+    <table className={classnames(styles.table, className)}>
+      <thead>
+      <tr>
+        <th>{t('optionsTable.icon')}</th>
+        <th>{t('optionsTable.category')}</th>
+        <th>{t('optionsTable.mandatory')}</th>
+        <th>{t('optionsTable.postProcess')}</th>
+        {parentImagePackages.map(({ id, type }) => (
+          <th key={id} className={classnames(styles.packageTitle, styles[type])}>{t(`optionsTable.packages`, { context: type })}</th>
+        ))}
+      </tr>
+      <tr>
+        <th/>
+        <th/>
+        <th/>
+        <th/>
+        {currentImagePackages.map(({ id }) => (
+          <th key={id} className={styles.counts}>{t('optionsTable.counts')}</th>
+        ))}
+      </tr>
+      </thead>
+      <tbody>
+      {Array.from(categoriesCounts).map(([category, imageCounts]) => (
+        <tr key={category}>
+          <td>
+            <IconSVG className={styles.icon} name='pictures' onClick={() => onShowImages(Array.from(imageCodesByCategories.get(category)))}/>
+          </td>
+          <td>{t('optionsTable.category', { context: category })}</td>
+          <td>{imageCounts.mandatoryCount}</td>
+          <td>{imageCounts.postProcessCount}</td>
+          {currentImagePackages.map((imagePackage) => {
+            const { id } = imagePackage;
+            const { mandatoryCount, postProcessCount } = categoriesPackagesCounts.get(category).get(imagePackage);
+
+            if (mandatoryCount !== 0 || postProcessCount !== 0) {
+              return (
+                <td key={id}>{mandatoryCount} | {postProcessCount}</td>
+              );
+            }
+
+            return (
+              <td key={id}>0</td>
+            );
+          })}
+        </tr>
+      ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default React.memo(OptionsTable);

package/compat/ImageSettings/PricePlan/PricePlan.styl

@@ -0,0 +1,63 @@
+@import '../../legacy-theme/theme.styl'
+
+.container
+  font-family: $font-style-arial
+  text-align: center
+  color: $grey-3
+
+.imagePackageType
+  font-family: $font-style-arial
+  text-align: center
+  border: 4px solid
+
+  .basic &
+    border-color: #C4C4C4
+
+  .premium &
+    border-color: #71CBF4
+
+  .auto_de_premium &
+    border-color: $skyBlue
+
+.title
+  padding: 16px 0
+  margin: 0 21px 21px
+  font-size: 18px
+  font-weight: $font-weight-bold
+  border-bottom: 1px solid
+
+  .basic &
+    color: #333333
+    border-color: #C4C4C4
+
+  .premium &
+    color: #71CBF4
+    border-color: #71CBF4
+
+  .auto_de_premium &
+    color: $skyBlue
+    border-color: $skyBlue
+
+.text
+  font-size: 18px
+  margin: 0 21px 10px
+
+.name
+  font-size: 18px
+  font-weight: $font-weight-bold
+  margin: 0 21px 21px
+
+.price
+  font-size: 16px
+  font-weight: $font-weight-medium
+  padding: 24px 0
+
+  .basic &
+    background-color: #C4C4C4
+
+  .premium &
+    background-color: #71CBF4
+
+  .auto_de_premium &
+    color: white
+    background-color: $skyBlue

package/compat/ImageSettings/PricePlan/PricePlan.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { ImageCounts, ImagePackage } from '../index';
+
+import styles from './PricePlan.styl';
+
+export interface IProps {
+  t: (key: string, options?: object) => string;
+  imagePackage: ImagePackage;
+  imageCounts: ImageCounts;
+  price: number;
+  className?: string;
+}
+
+const PricePlan: React.FunctionComponent<IProps> = ({ t, imagePackage: { type }, imageCounts: { mandatoryCount, postProcessCount }, price, className }) => (
+  <div className={classnames(styles.container, className, { [styles[type]]: type !== undefined })}>
+    <div className={styles.imagePackageType}>
+      <div className={styles.title}>{t('pricePlan.title', { context: type })}</div>
+      <div className={styles.text}>{t('pricePlan.mandatoryCount', { count: mandatoryCount })}</div>
+      <div className={styles.text}>{t('pricePlan.postProcessCount', { count: postProcessCount })}</div>
+      <div className={styles.name}>{t('pricePlan.name', { context: type })}</div>
+    </div>
+    <div className={styles.price}>{t('pricePlan.price', { price: price.toFixed(2) })}</div>
+  </div>
+);
+
+PricePlan.defaultProps = {
+  price: 0
+};
+
+export default React.memo(PricePlan);

package/compat/ImageSettings/index.ts

@@ -0,0 +1,42 @@
+import EditableOptionsTable from './EditableOptionsTable/EditableOptionsTable';
+import OptionsTable from './OptionsTable/OptionsTable';
+import PricePlan from './PricePlan/PricePlan';
+
+export type ImagePackageConfig = {
+  category: string;
+  image_code: string;
+  mandatory: boolean;
+  postProcess: boolean;
+  priority: number;
+};
+
+export type ImagePackage = {
+  id?: number;
+  odooProductId?: string;
+  parentId?: number;
+  parentOdooProductId?: string;
+  type?: string;
+  title: string;
+  forAll: boolean;
+  imagePackageConfigs: ImagePackageConfig[];
+};
+
+export type ImageCounts = {
+  mandatoryCount: number;
+  postProcessCount: number;
+};
+
+export type DisabledImage = {
+  imagePackageType?: string;
+  imageCode?: string;
+  mandatory: boolean;
+  postProcess: boolean;
+};
+
+export type ImageType = 'mandatory' | 'postProcess';
+
+export {
+  EditableOptionsTable,
+  OptionsTable,
+  PricePlan
+};

package/compat/ImagesSet/ImagesSet.styl

@@ -0,0 +1,28 @@
+@import '../legacy-theme/theme.styl'
+
+.wrapper
+  display: flex
+  flex-wrap: wrap
+  flex-direction: column
+  width: 100%
+  height: 100%
+
+.outer
+  box-sizing: border-box
+  overflow: hidden
+  position: relative
+  border: 4px solid white
+
+.inner
+  height: 100%
+  width: 100%
+  background-color: white
+  background-size: cover
+  background-position: center center
+  transition: all 0.5s ease
+  background-repeat: no-repeat
+  &:hover
+    transform: scale(1.2)
+
+.clickable
+  cursor: pointer

package/compat/ImagesSet/ImagesSet.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './ImagesSet.styl';
+
+export interface IImage {
+  url: string;
+  [key: string]: any;
+}
+
+export interface IImagesSetProps {
+  images?: IImage[];
+  imageSizes: (1 | 2)[];
+  columnsCount: number;
+  rowsCount: number;
+
+  placeholderUrl?: string;
+  wrapperClassName?: string;
+  outerClassName?: string;
+  innerClassName?: string;
+
+  onImageClick?: (event: React.MouseEvent<HTMLDivElement>, imageObject: IImage) => void;
+}
+
+const ImagesSet: React.FC<IImagesSetProps> = (props) => {
+  const { images, imageSizes, columnsCount, rowsCount, placeholderUrl,
+    wrapperClassName, outerClassName, innerClassName, onImageClick
+  } = props;
+
+  const columnWidth = 100 / columnsCount; // tslint:disable-line
+  const rowHeight = 100 / rowsCount; // tslint:disable-line 
+
+  const wrapperClass = classnames(styles.wrapper, wrapperClassName);
+
+  const onOuterClick = (imageObject: IImage) => (event: React.MouseEvent<HTMLDivElement>) => {
+    onImageClick(event, imageObject);
+  };
+
+  return (
+    <div className={wrapperClass}>
+      {imageSizes.map((coefficient: number, key: number) => {
+        const image = images[key] ? images[key] : null;
+        const url = image ? image.url : placeholderUrl;
+
+        const outerProps = {
+          key,
+          className: classnames(styles.outer, outerClassName, { [styles.clickable]: !!onImageClick }),
+          style: {
+            width: `${columnWidth}%`,
+            height: `${rowHeight * coefficient}%`
+          },
+          onClick: onOuterClick(image)
+        };
+
+        const innerProps: any = {
+          className: classnames(styles.inner, innerClassName)
+        };
+
+        if (url) {
+          innerProps.style = { backgroundImage: `url(${url})` };
+        }
+
+        return (
+          <div {...outerProps}>
+            <div {...innerProps}></div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+ImagesSet.defaultProps = {
+  images: []
+};
+
+export default ImagesSet;

package/compat/InfoBlockWrapper/InfoBlockWrapper.styl

@@ -0,0 +1,41 @@
+@import '../legacy-theme/mixins.styl'
+
+.container
+  padding 0 0 20px;
+  width: 100%
+  box-sizing border-box
+  background-color white
+  borderRadius();
+
+.headerWrap
+  display flex
+  box-sizing: border-box;
+  justify-content: space-between;
+  margin-bottom: 10px
+  padding: 11px 16px 11px 16px;
+  border-bottom: 1px solid rgba(196, 196, 196, 0.5);
+
+.title
+  margin 0
+  font-size: 18px;
+  color: rgba(#000, 60%) !important;
+
+  +media-phone-only()
+    font-size: 18px
+    text-align: center;
+
+.compareNow
+  color: $skyBlue;
+  font-size: 12px;
+  cursor: pointer
+
+.contentNoWrap
+//   display: grid;
+//   grid-template-columns: repeat(4, 1fr);
+//   grid-gap: 50px;
+  padding 5px 16px 0 16px;
+
+  +media-phone-only()
+    // grid-template-columns: repeat(1, 1fr);
+    // grid-gap: 0;
+    padding 0 20px;

package/compat/InfoBlockWrapper/InfoBlockWrapper.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import styles from './InfoBlockWrapper.styl';
+import classnames from 'classnames';
+
+interface IInfoBlockWrapperProps {
+  containerClassName?: string;
+  childrenClassName?: string;
+  title: string;
+  titleDetails?: string;
+  onDetailsClick?: () => void;
+  children?: React.ReactNode;
+}
+
+const InfoBlockWrapper: React.FunctionComponent<IInfoBlockWrapperProps> = (props) => {
+  const { containerClassName, childrenClassName, title, titleDetails, children, onDetailsClick } = props;
+  const containerClasses = classnames(styles.container, containerClassName);
+  const childrenWrap = classnames(styles.contentNoWrap, childrenClassName);
+
+  const renderSliderItems = useMemo(
+    () => {
+      return (
+        <div className={containerClasses}>
+          <div className={styles.headerWrap}>
+            <h3 className={styles.title}>{title}</h3>
+            {titleDetails ? <span className={styles.compareNow} onClick={onDetailsClick}>{titleDetails}</span> : ''}
+          </div>
+          <div className={childrenWrap}>{children}</div>
+        </div>
+      );
+    },
+    [children]
+  );
+
+  return renderSliderItems;
+
+};
+
+InfoBlockWrapper.defaultProps = {
+  containerClassName: '',
+  childrenClassName: '',
+  title: '',
+  titleDetails: '',
+  onDetailsClick: () => { }
+};
+
+export default InfoBlockWrapper;

package/compat/Loader/Loader.styl

@@ -0,0 +1,39 @@
+@import '../legacy-theme/theme.styl'
+
+@keyframes auto_de_loader {
+  0%   { transform: rotate(0deg)   }
+  100% { transform: rotate(360deg) }
+}
+
+.loader
+  border-style: solid
+  border-color: $primary #E6E6E6 #E6E6E6 #E6E6E6
+  border-radius: 50%
+  box-sizing: border-box
+  animation: auto_de_loader 1.5s linear infinite
+
+.loader.tiny
+  border-width: 2px
+  width: 15px
+  height: 15px
+
+.loader.small
+  border-width: 3px
+  width: 25px
+  height: 25px
+
+.loader.medium
+  border-width: 5px
+  height: 60px
+  width: 60px
+
+.loader.large
+  border-width: 10px
+  height: 110px
+  width: 110px
+
+.loader.fluid
+  border-width: 5px
+  width: 100%
+  height: 100%
+

package/compat/Loader/Loader.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import styles from './Loader.styl';
+import classnames from 'classnames';
+
+export type LoaderSize = 'tiny' | 'small' | 'medium' | 'large';
+
+export interface ILoaderProps {
+  className?: string;
+  size?: LoaderSize;
+  fluid?: boolean;
+}
+
+const Loader: React.FC<ILoaderProps> = ({ className, size, fluid }) => {
+  const classNames = classnames(
+    styles.loader,
+    { [styles[size]]: !fluid },
+    { [styles.fluid]: fluid },
+    className
+  );
+
+  return (
+    <div className={classNames} />
+  );
+};
+
+Loader.defaultProps = {
+  className: '',
+  size: 'medium',
+  fluid: false
+};
+
+export default Loader;

package/compat/MagnifyGlass/MagnifyGlass.styl

@@ -0,0 +1,33 @@
+@import "../legacy-theme/mixins.styl"
+
+.magnifier
+  position: relative
+
+  &.withZoom
+    cursor: none
+
+.mgGlass
+  position: absolute
+  z-index: 1
+  transition: opacity 0.3s
+  background: #e5e5e5 no-repeat
+  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25)
+  pointer-events: none
+  opacity: 0
+  visibility: hidden
+  border-radius: 50%
+  transition: 0.3s opacity linear, 0.3s visibility linear
+
+  &.visible
+    opacity: 1
+    visibility: visible
+
+.mgWrapper
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  pointer-events: none
+
+  +media-tablet-down()
+    display none