@bytebrand/fe-ui-core 4.8.109 → 4.8.111

package/.storybook/config.js

@@ -1,64 +0,0 @@
- 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 +0,0 @@
-module.exports = ({ file, options, env }) => ({
-  parser: false,
-  plugins: {
-    'autoprefixer': env === 'production' ? options.autoprefixer : false,
-  }
-});

package/.storybook/preview-head.html

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

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

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

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

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

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