@bytebrand/fe-ui-core 4.8.49 → 4.8.50

package/.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run test:ci

package/.storybook/addons.js

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

package/.storybook/config.js

@@ -0,0 +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);

package/.storybook/postcss.config.js

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

package/.storybook/preview-head.html

@@ -0,0 +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"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

package/.storybook/webpack.config.js

@@ -0,0 +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;

package/__tests__/components/Checkout/OrderOverviewItem/OrderOverviewItem.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OrderOverviewItem from '../../../../source/components/Checkout/OrderOverviewItem/OrderOverviewItem';
+
+describe('OrderOverviewItem', () => {
+  it('renders the component with the correct data', () => {
+    const fields = {
+      title: 'Test Title',
+      oneLineRate: '10',
+      additionalTitle: 'Additional Title',
+      content: [
+        {
+          rate: '5',
+          fieldName: 'Field Name'
+        }
+      ],
+      rate: '15'
+    };
+    const activeStep = 1;
+    const handleClick = jest.fn();
+    render(
+      <OrderOverviewItem
+        fields={fields}
+        activeStep={activeStep}
+        handleStep={handleClick}
+        titleClassName="test-title-class"
+        fieldClassName="test-field-class"
+      />
+    );
+    // Test that the correct elements are rendered with the correct values
+    expect(screen.getByText(fields.title)).toBeInTheDocument();
+    expect(screen.getByText(fields.oneLineRate)).toBeInTheDocument();
+    expect(screen.getByText(fields.additionalTitle)).toBeInTheDocument();
+    expect(screen.getByText(fields.content[0].rate)).toBeInTheDocument();
+    // Test that the correct classes are applied
+    expect(screen.getByText(fields.title)).toHaveClass('test-title-class');
+    expect(screen.getByText(fields.oneLineRate)).toHaveClass('test-field-class');
+    // Test that the edit icon is clickable and calls the handleStep function
+    expect(screen.getByTestId('editIcon')).toBeInTheDocument();
+    
+  });
+});

package/__tests__/components/Checkout/PaymentTypeCard/PaymentTypeCard.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import PaymentTypeCard from '../../../../source/components/Checkout/RadioCards/PaymentTypeCard/PaymentTypeCard';
+
+describe('PaymentTypeCard', () => {
+  it('should render correctly', () => {
+    const { getByText } = render(<PaymentTypeCard value="test-value" label="Test Label" />);
+    expect(getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('should handle onChange event correctly', () => {
+    const handleChange = jest.fn();
+    const { getByRole } = render(<PaymentTypeCard value="test-value" label="Test Label" onChange={handleChange} />);
+    fireEvent.click(getByRole('radio'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle onChange event correctly if we have checkbox="true"', () => {
+    const handleChange = jest.fn();
+    const { getByRole } = render(
+      <PaymentTypeCard
+        checkbox
+        value="test-value"
+        label="Test Label"
+        onChange={handleChange}
+      />
+    );
+    fireEvent.click(getByRole('checkbox'));
+    fireEvent.click(getByRole('checkbox'));
+    expect(handleChange).toHaveBeenCalledTimes(2);
+  })
+
+  it('should be correct classes on depend on prop "disabled, checked, error"', () => {
+    const handleChange = jest.fn();
+    const { getByTestId } = render(
+      <PaymentTypeCard
+        value="test-value"
+        label="Test Label"
+        onChange={handleChange}
+        disabled
+        checked
+        error
+      />
+    );
+    const container = getByTestId('container');
+    expect(container).toHaveClass('disabled');
+    expect(container).toHaveClass('checked');
+    expect(container).toHaveClass('error');
+  })
+});

package/__tests__/components/Checkout/RadioGroup.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, fireEvent, screen, prettyDOM, waitFor } from '@testing-library/react';
+import RadioGroup from '../../../source/components/_common/Radio/RadioGroup';
+import ServiceCardWrapper from '../../../source/components/Checkout/RadioCards/AdditionalServiceCard/ServiceCardWrapper';
+
+const onChangeMock = jest.fn();
+
+const children = [
+  <ServiceCardWrapper
+    key={1}
+    label={'additionalServices.warranty.label'}
+    infoContent={'warranty'}
+    footerText={'completeService'}
+    value={3}
+    warrantyCard={true}
+    price={897456123}
+    additionalOptions={['Alles aus Bronze Garantiepaket', 'Klima- & Kühlsysteme', 'Elektrische Anlagen']}
+    monthly={'additionalServices.monthly'}
+    className={'className'}
+    modalTitle={'title'}
+    modalContent={[
+      'Motor',
+      'Schalt- & Automatikgetriebe',
+      'Differenzial'
+    ]}
+    onCheckoutModalClick={() => {}}
+    isHybridOrElectric={false}
+    warrantyName={'name'}
+  />,
+  <ServiceCardWrapper
+    key={2}
+    label={'additionalServices.another.label'}
+    infoContent={'another'}
+    footerText={'completeService'}
+    value={2}
+    warrantyCard={true}
+    price={987654321}
+    additionalOptions={['Option 1', 'Option 2', 'Option 3']}
+    monthly={'additionalServices.monthly'}
+    className={'className'}
+    modalTitle={'title'}
+    modalContent={[
+      'Option 1',
+      'Option 2',
+      'Option 3'
+    ]}
+    onCheckoutModalClick={() => {}}
+    isHybridOrElectric={false}
+    warrantyName={'name'}
+    checked={false}
+  />
+];
+
+describe('RadioGroup', () => {
+  it('renders correctly with children', () => {
+    const { getByText } = render(
+      <RadioGroup
+        name='testRadioGroup'
+        value={1}
+        onChange={onChangeMock}
+        error={false}
+        containerClassName='containerClassName'
+        childClassName='childClassName'
+        wrapperClassname='wrapperClassname'
+        radioName='radioName'
+        onBlur={() => {}}
+      >
+        {children}
+      </RadioGroup>
+    );
+    expect(getByText('additionalServices.warranty.label')).toBeInTheDocument();
+    expect(getByText('additionalServices.another.label')).toBeInTheDocument();
+  });
+
+  it('calls onChange when a radio button is selected', () => {
+    const { getByRole, getByDisplayValue  } = render(
+      <RadioGroup
+        name='testRadioGroup'
+        value={1}
+        onChange={onChangeMock}
+        error={false}
+        containerClassName='containerClassName'
+        childClassName='childClassName'
+        wrapperClassname='wrapperClassname'
+        radioName='radioName'
+        onBlur={() => {}}
+      >
+        {children}
+      </RadioGroup>
+    );
+    const radioOption1 = getByRole('radio', { name: 'additionalServices.warranty.label 897.456.123 € /additionalServices.monthly warranty Alles aus Bronze Garantiepaket Klima- & Kühlsysteme Elektrische Anlagen' });
+    fireEvent.click(radioOption1);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+  });
+});

package/__tests__/components/Checkout/ServiceCardWrapper.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen, fireEvent, prettyDOM } from '@testing-library/react';
+import ServiceCardWrapper from '../../../source/components/Checkout/RadioCards/AdditionalServiceCard/ServiceCardWrapper';
+
+describe('ServiceCardWrapper', () => {
+  const defaultProps = {
+    value: '1',
+    checked: false,
+    onCheckoutModalClick: jest.fn()
+  };
+  const getWrapper = (props = {}) => {
+    return render(<ServiceCardWrapper {...defaultProps} {...props} />);
+  };
+
+  it('should render all elements properly', () => {
+    const { container } = getWrapper({
+      label: 'Test label',
+      price: 100,
+      checked: true,
+      footerText: 'Test footer text'
+    });
+
+    expect(screen.getByText('Test label')).toBeInTheDocument();
+    expect(screen.getByText('100')).toBeInTheDocument();
+    expect(screen.getByText('€')).toBeInTheDocument();
+    expect(container.querySelector('input[type="radio"]')).toBeInTheDocument();
+  });
+
+  it('should call onChange function with proper arguments on radio button click', () => {
+    const onChange = jest.fn();
+    const { container } = getWrapper({
+      value: '2',
+      onChange
+    });
+
+    fireEvent.click(container.querySelector('input[type="radio"]'));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(expect.any(Object), true, '2');
+  });
+
+  it('should not call onChange function on radio button click if disabled', () => {
+    const onChange = jest.fn();
+    const { container } = getWrapper({
+      disabled: true,
+      onChange
+    });
+
+    fireEvent.click(container.querySelector('input[type="radio"]'));
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/__tests__/components/Checkout/Switcher.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Switcher from '../../../source/components/Checkout/Switcher/Switcher';
+
+describe('Switcher component', () => {
+  it('Should render options in Switcher', () => {
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+    const { getAllByRole } = render(
+          <Switcher options={options} value={1} />
+        );
+    const toggleButtons = getAllByRole('button');
+    expect(toggleButtons.length).toBe(options.length);
+    options.forEach((option, index) => {
+      expect(toggleButtons[index]).toHaveTextContent(option);
+    });
+  });
+
+  it('Should call onChange function when an option is selected', () => {
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+    const onChangeMock = jest.fn();
+    const { getAllByRole } = render(
+          <Switcher options={options} value={1} onChange={onChangeMock} />
+        );
+    const toggleButtons = getAllByRole('button');
+    fireEvent.click(toggleButtons[1]);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toHaveBeenCalledWith(expect.anything(), 2, undefined);
+  });
+
+  it('Should pass correct values to ToggleButton', () => {
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+    const value = 2;
+    const { getAllByRole } = render(
+          <Switcher options={options} value={value} />
+        );
+    const toggleButtons = getAllByRole('button');
+    options.forEach((option, index) => {
+      const toggleButton = toggleButtons[index];
+      expect(toggleButton).toHaveTextContent(option);
+      expect(toggleButton).toHaveAttribute('value', String(index + 1));
+    });
+  });
+});