@bytebrand/fe-ui-core 4.2.59 → 4.2.61

package/.editorconfig

@@ -1,10 +1,10 @@
-[*]
-indent_style = space
-end_of_line = lf
-indent_size = 2
-charset = utf-8
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = 0
-trim_trailing_whitespace = false
+[*]
+indent_style = space
+end_of_line = lf
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

package/.storybook/addons.js

@@ -1,4 +1,4 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-backgrounds/register';
-import 'storybook-addon-i18next/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-backgrounds/register';
+import 'storybook-addon-i18next/register';

package/.storybook/config.js

@@ -1,64 +1,64 @@
- import { configure, addDecorator, addParameters } from '@storybook/react';
-
-import i18n from 'i18next';
-import centered from '@storybook/addon-centered/react';
-
-import { reactI18nextModule } from 'react-i18next';
-import { withI18next } from 'storybook-addon-i18next';
-import { en, de } from '@bytebrand/i18n-dictionaries';
-
-import '!style-loader!css-loader!stylus-loader!../source/theme/colors.styl';
-
-i18n
-  .use(reactI18nextModule)
-  .init({
-    whitelist: ['en', 'de'],
-    lng: 'de',
-    fallbackLng: 'de',
-    interpolation: {
-      escapeValue: false,
-    },
-    debug: process.env.NODE_ENV === 'development',
-    react: {
-      wait: true
-    },
-  },
-  (err, t) => {
-    if (err) {
-      return console.error('Something went wrong loading', err);
-    }
-
-    i18n.addResourceBundle('en', 'cbd', en, true, true);
-    i18n.addResourceBundle('de', 'cbd', de, true, true);
-
-  });
-
-addDecorator(withI18next({
-  i18n,
-  languages: {
-    en: 'English',
-    de: 'Deutsch',
-  }
-}));
-
-addParameters({
-  options: {
-    sortStoriesByKind: true
-  },
-  backgrounds: [
-    { name: 'white', value: '#fff' },
-    { name: 'grey', value: '#808080', default: true },
-    { name: 'black', value: '#000' }
-  ]
-});
-
-addDecorator(centered);
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../source/components', true, /.story.js$/);
-
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+ import { configure, addDecorator, addParameters } from '@storybook/react';
+
+import i18n from 'i18next';
+import centered from '@storybook/addon-centered/react';
+
+import { reactI18nextModule } from 'react-i18next';
+import { withI18next } from 'storybook-addon-i18next';
+import { en, de } from '@bytebrand/i18n-dictionaries';
+
+import '!style-loader!css-loader!stylus-loader!../source/theme/colors.styl';
+
+i18n
+  .use(reactI18nextModule)
+  .init({
+    whitelist: ['en', 'de'],
+    lng: 'de',
+    fallbackLng: 'de',
+    interpolation: {
+      escapeValue: false,
+    },
+    debug: process.env.NODE_ENV === 'development',
+    react: {
+      wait: true
+    },
+  },
+  (err, t) => {
+    if (err) {
+      return console.error('Something went wrong loading', err);
+    }
+
+    i18n.addResourceBundle('en', 'cbd', en, true, true);
+    i18n.addResourceBundle('de', 'cbd', de, true, true);
+
+  });
+
+addDecorator(withI18next({
+  i18n,
+  languages: {
+    en: 'English',
+    de: 'Deutsch',
+  }
+}));
+
+addParameters({
+  options: {
+    sortStoriesByKind: true
+  },
+  backgrounds: [
+    { name: 'white', value: '#fff' },
+    { name: 'grey', value: '#808080', default: true },
+    { name: 'black', value: '#000' }
+  ]
+});
+
+addDecorator(centered);
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../source/components', true, /.story.js$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

package/.storybook/postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = ({ file, options, env }) => ({
-  parser: false,
-  plugins: {
-    'autoprefixer': env === 'production' ? options.autoprefixer : false,
-  }
-});
+module.exports = ({ file, options, env }) => ({
+  parser: false,
+  plugins: {
+    'autoprefixer': env === 'production' ? options.autoprefixer : false,
+  }
+});

package/.storybook/preview-head.html

@@ -1,10 +1,10 @@
-<link rel="stylesheet" type="text/css" charset="UTF-8"
-    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
-<link rel="stylesheet" type="text/css"
-    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
-
-<link rel="stylesheet" type="text/css"
-    href="https://cdn.jsdelivr.net/npm/react-checkbox-tree@1.5.1/lib/react-checkbox-tree.css" />
-
-<link rel="stylesheet" type="text/css"
+<link rel="stylesheet" type="text/css" charset="UTF-8"
+    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
+<link rel="stylesheet" type="text/css"
+    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+
+<link rel="stylesheet" type="text/css"
+    href="https://cdn.jsdelivr.net/npm/react-checkbox-tree@1.5.1/lib/react-checkbox-tree.css" />
+
+<link rel="stylesheet" type="text/css"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

package/.storybook/webpack.config.js

@@ -1,130 +1,130 @@
-const path = require('path');
-const autoprefixer = require('autoprefixer');
-
-const babelPlugins = [
-  [require('@babel/plugin-proposal-decorators').default , { legacy: true }],
-  require('@babel/plugin-transform-react-constant-elements').default,
-  require('@babel/plugin-proposal-class-properties').default,
-  require('babel-plugin-minify-dead-code-elimination'),
-  require('babel-plugin-transform-imports')
-];
-
-const presetOptions = {
-  useBuiltIns: 'usage',
-  corejs: '2'
-};
-
-const babelPresets = [
-  [require('@babel/preset-env').default, presetOptions],
-  require('@babel/preset-react').default,
-  require('@babel/preset-typescript').default
-];
-
-const BABEL_LOADER = {
-  loader: require.resolve('babel-loader'),
-  options: {
-    babelrc: false,
-    cacheDirectory: true,
-    presets: babelPresets,
-    plugins: babelPlugins
-  }
-};
-
-const TSLINT_LOADER = {
-
-};
-
-const CSS_LOADER = ({ modules }) => ({
-  loader: require.resolve('css-loader'),
-  options: {
-    modules,
-    sourceMap: true,
-    importLoaders: 1,
-    localsConvention: 'camelCase'
-  }
-});
-
-const STYLUS_LOADER = {
-  loader: require.resolve('stylus-loader'),
-  options: {
-    sourceMap: 'inline'
-  }
-};
-
-const POST_CSS_LOADER = {
-  loader: require.resolve('postcss-loader'),
-  options: {
-    sourceMap: 'inline',
-    ident: 'postcss',
-    config: {
-      path: path.join(__dirname, './postcss.config.js')
-    },
-    plugins: () => [
-      autoprefixer({
-        grid: false
-      })
-    ]
-  }
-};
-
-const STYLE_LOADER = {
-  loader: require.resolve('style-loader'),
-  options: {
-    injectType: 'singletonStyleTag'
-  }
-};
-
-const buildConfig = async ({ config, mode }) => {
-  config.module.rules.push({
-    enforce: 'pre',
-    test: /\.tsx?$/,
-    loader: require.resolve('tslint-loader'),
-    exclude: '/node_modules/',
-    options: {
-      emitErrors: true
-    }
-  });
-
-  config.module.rules.push({
-    test: /\.tsx?$/,
-    exclude: /(node_modules|public)\/(?!@bytebrand).*/,
-    use: [BABEL_LOADER]
-  });
-
-  config.module.rules.push({
-    test: /\.css$/,
-    use: [
-      STYLE_LOADER,
-      CSS_LOADER({ modules: true }),
-      POST_CSS_LOADER
-    ]
-  });
-
-  config.module.rules.push({
-    test: /\.styl$/,
-    exclude: /\.global.styl$/,
-    use: [
-      STYLE_LOADER,
-      CSS_LOADER({ modules: true }),
-      POST_CSS_LOADER,
-      STYLUS_LOADER
-    ]
-  });
-
-  // prepend .global to *.stylus file to import it globally
-  config.module.rules.push({
-    test: /\.global.styl$/,
-    use: [
-      STYLE_LOADER,
-      CSS_LOADER({ modules: false }),
-      POST_CSS_LOADER,
-      STYLUS_LOADER
-    ]
-  });
-
-  config.resolve.extensions.push('.ts', '.tsx', '.styl');
-
-  return config;
-};
-
-module.exports = buildConfig;
+const path = require('path');
+const autoprefixer = require('autoprefixer');
+
+const babelPlugins = [
+  [require('@babel/plugin-proposal-decorators').default , { legacy: true }],
+  require('@babel/plugin-transform-react-constant-elements').default,
+  require('@babel/plugin-proposal-class-properties').default,
+  require('babel-plugin-minify-dead-code-elimination'),
+  require('babel-plugin-transform-imports')
+];
+
+const presetOptions = {
+  useBuiltIns: 'usage',
+  corejs: '2'
+};
+
+const babelPresets = [
+  [require('@babel/preset-env').default, presetOptions],
+  require('@babel/preset-react').default,
+  require('@babel/preset-typescript').default
+];
+
+const BABEL_LOADER = {
+  loader: require.resolve('babel-loader'),
+  options: {
+    babelrc: false,
+    cacheDirectory: true,
+    presets: babelPresets,
+    plugins: babelPlugins
+  }
+};
+
+const TSLINT_LOADER = {
+
+};
+
+const CSS_LOADER = ({ modules }) => ({
+  loader: require.resolve('css-loader'),
+  options: {
+    modules,
+    sourceMap: true,
+    importLoaders: 1,
+    localsConvention: 'camelCase'
+  }
+});
+
+const STYLUS_LOADER = {
+  loader: require.resolve('stylus-loader'),
+  options: {
+    sourceMap: 'inline'
+  }
+};
+
+const POST_CSS_LOADER = {
+  loader: require.resolve('postcss-loader'),
+  options: {
+    sourceMap: 'inline',
+    ident: 'postcss',
+    config: {
+      path: path.join(__dirname, './postcss.config.js')
+    },
+    plugins: () => [
+      autoprefixer({
+        grid: false
+      })
+    ]
+  }
+};
+
+const STYLE_LOADER = {
+  loader: require.resolve('style-loader'),
+  options: {
+    injectType: 'singletonStyleTag'
+  }
+};
+
+const buildConfig = async ({ config, mode }) => {
+  config.module.rules.push({
+    enforce: 'pre',
+    test: /\.tsx?$/,
+    loader: require.resolve('tslint-loader'),
+    exclude: '/node_modules/',
+    options: {
+      emitErrors: true
+    }
+  });
+
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    exclude: /(node_modules|public)\/(?!@bytebrand).*/,
+    use: [BABEL_LOADER]
+  });
+
+  config.module.rules.push({
+    test: /\.css$/,
+    use: [
+      STYLE_LOADER,
+      CSS_LOADER({ modules: true }),
+      POST_CSS_LOADER
+    ]
+  });
+
+  config.module.rules.push({
+    test: /\.styl$/,
+    exclude: /\.global.styl$/,
+    use: [
+      STYLE_LOADER,
+      CSS_LOADER({ modules: true }),
+      POST_CSS_LOADER,
+      STYLUS_LOADER
+    ]
+  });
+
+  // prepend .global to *.stylus file to import it globally
+  config.module.rules.push({
+    test: /\.global.styl$/,
+    use: [
+      STYLE_LOADER,
+      CSS_LOADER({ modules: false }),
+      POST_CSS_LOADER,
+      STYLUS_LOADER
+    ]
+  });
+
+  config.resolve.extensions.push('.ts', '.tsx', '.styl');
+
+  return config;
+};
+
+module.exports = buildConfig;

package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusCar.test.tsx

@@ -1,58 +1,58 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react'
-import OrderStatusCar from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCar';
-
-const t = (phrase: string | string[], options: object) => {
-  if (options) {
-    const value = Object.values(options).map((option) => option)
-    return `${phrase} ${value}`;
-  }
-  return phrase;
-}
-
-const mockProps = {
-  t,
-  make: 'Test Make',
-  model: 'Test Model',
-  subModel: 'test car',
-  buyingType: 'buy',
-  imageUrl: 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp',
-  selfPickup: false,
-  paybackPeriod: 12,
-  monthlyInstallment: 2000,
-  status: 'selector_status_order_received',
-  request: '1234abcd',
-  registration: false,
-  currentSalesPrice: 30000,
-  onClick: jest.fn()
-}
-
-describe('OrderStatusCar', () => {
-  it('renders OrderStatusCar component without error', () => {
-    const { container } = render(<OrderStatusCar {...mockProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('should display correct car make and model', () => {
-    const { getByText } = render(<OrderStatusCar {...mockProps} />);
-    expect(getByText(`${mockProps.make} ${mockProps.model}`)).toBeInTheDocument();
-  });
-
-  it('should display correct car characteristics', () => {
-    const { getByText } = render(<OrderStatusCar {...mockProps} />);
-    expect(getByText(mockProps.subModel)).toBeInTheDocument();
-  });
-
-  it('should display correct car image', () => {
-    const { getByTestId } = render(<OrderStatusCar {...mockProps}/>);
-    const carImage = getByTestId('car-image')
-    expect(carImage).toHaveAttribute('src', mockProps.imageUrl);
-  });
-
-  it('should call onClick function when user clicks on the car card', () => {
-    const { getByTestId } = render(<OrderStatusCar {...mockProps} />);
-    const carCard = getByTestId('car-card');
-    fireEvent.click(carCard);
-    expect(mockProps.onClick).toHaveBeenCalled();
-  });
-});
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react'
+import OrderStatusCar from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCar';
+
+const t = (phrase: string | string[], options: object) => {
+  if (options) {
+    const value = Object.values(options).map((option) => option)
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+}
+
+const mockProps = {
+  t,
+  make: 'Test Make',
+  model: 'Test Model',
+  subModel: 'test car',
+  buyingType: 'buy',
+  imageUrl: 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp',
+  selfPickup: false,
+  paybackPeriod: 12,
+  monthlyInstallment: 2000,
+  status: 'selector_status_order_received',
+  request: '1234abcd',
+  registration: false,
+  currentSalesPrice: 30000,
+  onClick: jest.fn()
+}
+
+describe('OrderStatusCar', () => {
+  it('renders OrderStatusCar component without error', () => {
+    const { container } = render(<OrderStatusCar {...mockProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should display correct car make and model', () => {
+    const { getByText } = render(<OrderStatusCar {...mockProps} />);
+    expect(getByText(`${mockProps.make} ${mockProps.model}`)).toBeInTheDocument();
+  });
+
+  it('should display correct car characteristics', () => {
+    const { getByText } = render(<OrderStatusCar {...mockProps} />);
+    expect(getByText(mockProps.subModel)).toBeInTheDocument();
+  });
+
+  it('should display correct car image', () => {
+    const { getByTestId } = render(<OrderStatusCar {...mockProps}/>);
+    const carImage = getByTestId('car-image')
+    expect(carImage).toHaveAttribute('src', mockProps.imageUrl);
+  });
+
+  it('should call onClick function when user clicks on the car card', () => {
+    const { getByTestId } = render(<OrderStatusCar {...mockProps} />);
+    const carCard = getByTestId('car-card');
+    fireEvent.click(carCard);
+    expect(mockProps.onClick).toHaveBeenCalled();
+  });
+});