@bytebrand/fe-ui-core 4.2.65 → 4.2.67

package/__tests__/components/_common/MaterialAutocomplete/MaterialAutocomplete.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import MaterialAutocomplete from "../../../../source/components/_common/MaterialAutocomplete/MaterialAutocomplete";
+let value: any = null;
+const setValue = jest.fn();
+const materialAutocompleteProps = {
+  onChange: setValue,
+  label: 'test label',
+  value: value,
+  error: false,
+  required: true,
+  items: [
+    { value: '+49', label: '+49', icon: 'de' },
+    { value: '+43', label: '+43', icon: 'at' }
+  ],
+  listWithImage: 'true'
+}
+describe('MaterialAutocomplete', () => {
+  it('renders component without errors', () => {
+    const { container, getByRole, getByText } = render(<MaterialAutocomplete {...materialAutocompleteProps} />)
+    expect(container).toBeInTheDocument();
+    const input = getByRole('combobox');
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const listItem = getByText('+43');
+    fireEvent.click(listItem);
+    expect(input).toHaveAttribute('value', '+43');
+  })
+
+  it('renders component, open list and choose any option from list', () => {
+    const { getByRole, getByText } = render(<MaterialAutocomplete {...materialAutocompleteProps} />)
+    const input = getByRole('combobox');
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const listItem = getByText('+43');
+    fireEvent.click(listItem);
+    expect(input).toHaveAttribute('value', '+43');
+  })
+
+  it('renders component, open list and check if we have icons in list, when "listWithImage: true"', () => {
+    const { getByRole, container } = render(<MaterialAutocomplete {...materialAutocompleteProps} />)
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const iconDe = container.querySelector('[id="flag-icons-de"]'); 
+    const iconAt = container.querySelector('[id="flag-icons-at"]'); 
+    expect(iconDe).toBeInTheDocument();
+    expect(iconAt).toBeInTheDocument();
+  })
+})

package/__tests__/components/_common/MaterialField/MaterialField.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import MaterialField from '../../../../source/components/_common/MaterialField/MaterialField';
+
+describe('MaterialField', () => {
+  const props = {
+    label: 'Test Label',
+    value: 'Test Value',
+    onChange: jest.fn(),
+    disabled: false,
+    type: 'text',
+    autoComplete: 'off',
+    name: 'testName',
+    required: true,
+    multiline: false,
+    rows: 1,
+    placeholder: 'Test Placeholder'
+  };
+
+  it('renders the input element with the correct props', () => {
+    const { getByRole } = render(<MaterialField size='medium' {...props} />);
+    const inputElement = getByRole('textbox');
+    expect(inputElement).toBeInTheDocument();
+    expect(inputElement).toHaveAttribute('type', 'text');
+    expect(inputElement).toHaveAttribute('value', 'Test Value');
+    expect(inputElement).toHaveAttribute('name', 'testName');
+    expect(inputElement).toHaveAttribute('required');
+    expect(inputElement).toHaveAttribute('placeholder', 'Test Placeholder');
+  });
+
+  it('calls the onChange prop when the input value changes', () => {
+    const { getByRole } = render(<MaterialField size='medium' {...props} />);
+    const inputElement = getByRole('textbox');
+    fireEvent.change(inputElement, { target: { value: 'New Value' } });
+    expect(props.onChange).toHaveBeenCalledTimes(1);
+    expect(props.onChange).toHaveBeenCalledWith('New Value', 'testName', expect.anything());
+  });
+
+  it('toggles password visibility when the icon button is clicked', () => {
+    const passwordProps = {
+      ...props,
+      type: 'password'
+    }
+    const { getByRole, getByPlaceholderText } = render(<MaterialField size='medium' {...passwordProps} />);
+    const iconButton = getByRole('button');
+    const inputElement = getByPlaceholderText('Test Placeholder');
+    fireEvent.click(iconButton);
+    expect(inputElement).toHaveAttribute('type', 'text');
+
+    fireEvent.click(iconButton);
+
+    expect(inputElement).toHaveAttribute('type', 'password');
+
+    fireEvent.click(iconButton);
+
+    expect(inputElement).toHaveAttribute('type', 'text');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.65",
+  "version": "4.2.67",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

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

@@ -114,9 +114,9 @@ export const Theme = createTheme({
     },
     MuiInputLabel: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
+        root: ({ ownerState: { size } }: { ownerState: { size?: string } }) => ({
           maxWidth: 'calc(100% - 28px)',
-          ...(ownerState.size === 'custom' && { // tslint:disable-line
+          ...(size === 'custom' && {
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
@@ -127,8 +127,8 @@ export const Theme = createTheme({
     },
     MuiOutlinedInput: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
-          ...(ownerState.size === 'small' && {
+        root: ({ ownerState: { size, name } }: { ownerState: { size?: string, name?: string } }) => ({
+          ...(size === 'small' && {
             paddingRight: '0 !important',
             flexWrap: 'nowrap !important',
             backgroundColor: '#fff',
@@ -150,11 +150,11 @@ export const Theme = createTheme({
             opacity:'0.38'
           },
           ['& .MuiAutocomplete-input']: {
-            ...(ownerState.name === 'mobileSearch' && {
+            ...(name === 'mobileSearch' && {
               textAlign: isMobileOnly ? 'right !important' : 'left'
             })
           },
-          ...(ownerState.size === 'custom' && {
+          ...(size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box',
             backgroundColor: '#fff',
@@ -164,7 +164,7 @@ export const Theme = createTheme({
               padding: '5.5px 4px 7.5px 6px !important'
             }
           }),
-          ...(ownerState.name === 'mobileSearch' && {
+          ...(name === 'mobileSearch' && {
             color: isMobileOnly ? '#005ccb' : 'rgba(0, 0, 0, 0.87)',
             backgroundColor: isMobileOnly ? 'transparent' : '#fff',
             paddingRight: isMobileOnly ? '33px !important' : '42px !important',
@@ -181,7 +181,7 @@ export const Theme = createTheme({
               borderWidth: isMobileOnly ? 0 : 1
             }
           })
-        })
+        } as any)
       }
     }
   }

package/source/components/_common/MaterialAutocomplete/MaterialAutocomplete.tsx

@@ -11,6 +11,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { Theme, ArrowSelect, CheckboxLabel } from './MaterialAutocomplete.styled';
 import isEqual from 'lodash/isEqual';
 import IconSVG from '../IconSVG/IconSVG';
+import { isMobileOnly } from 'react-device-detect';
 
 export interface IItems {
   value: string | number;
@@ -100,11 +101,8 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
         multiple={multiple}
         handleHomeEndKeys
         value={value}
-        name={name}
-        error={error ? error.toString() : ''}
         readOnly={readOnly}
-        listwithimage={listWithImage}
-        onChange={(e, newValue, reason: string, details?: { option: any }) => {
+        onChange={(e, newValue, _: string, details?: { option: any }) => {
           e.persist();
           if (typeof newValue === 'string') {
             onChange(newValue);
@@ -150,17 +148,16 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
         }}
         options={multiple ? items.map(option => option.label) : items}
         ListboxProps={{
-          sx: {
-            maxHeight: {
-              xs: MOBILE_ITEM_HEIGHT * MENU_ITEMS,
-              sm: ITEM_HEIGHT * MENU_ITEMS
-            }
+          style: {
+            maxHeight: isMobileOnly ?
+              MOBILE_ITEM_HEIGHT * MENU_ITEMS
+              : ITEM_HEIGHT * MENU_ITEMS
           }
         }}
         forcePopupIcon
         popupIcon={disableIcon ? '' : <ArrowSelect name='arrowSelect' customDimensions />}
         isOptionEqualToValue={(option, value) => option.value === value}
-        renderOption={(props, option) => {
+        renderOption={(props: any, option) => {
           if (multiple) {
             return (
               <li {...props}>
@@ -218,8 +215,7 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
             InputProps={{ ...params.InputProps, readOnly }}
           />
         )}
-      >
-      </Autocomplete>
+      />
     </ThemeProvider>
   );
 };

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

@@ -12,14 +12,14 @@ export const Theme = createTheme({
     },
     MuiInputLabel: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
-          ...(ownerState.size === 'smaller' && { // tslint:disable-line
+        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+          ...(size === 'smaller' && {
             marginTop: '-13px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
             }
           }),
-          ...(ownerState.size === 'custom' && { // tslint:disable-line
+          ...(size === 'custom' && {
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
@@ -30,13 +30,13 @@ export const Theme = createTheme({
     },
     MuiOutlinedInput: {
       styleOverrides: {
-        input: ({ ownerState }) => ({
-          ...(ownerState.size === 'smaller' && { // tslint:disable-line
+        input: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+          ...(size === 'smaller' && {
             height: 28,
             boxSizing: 'border-box',
             padding: '0 14px'
           }),
-          ...(ownerState.size === 'custom' && {
+          ...(size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box'
           })

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -64,7 +64,7 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
     setShowPassword(!showPassword);
   };
 
-  const handleMouseDownPassword = (event) => {
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     event.preventDefault();
   };
 

package/source/framework/utils/CommonUtils.ts

@@ -568,3 +568,15 @@ export const updateCookieList = () => {
   // grant Hotjar cookies
   if (isHotjarGranted && typeof window.grantHotjarCookieConsent === 'function') window.grantHotjarCookieConsent();
 };
+
+// function returns decimal part of number with 2 digits
+export const getCents = (value: number, prefix?: string, postfix?: string): string => {
+  if (!Number.isFinite(value)) return '';
+  const roundedValue = Math.floor(value);
+  const result = value.toFixed(2).toString().replace(`${roundedValue}.`, '');
+  return `${prefix}${result}${postfix}`;
+};
+
+export const priceParse = (value: any) => {
+  return !!value ? Number.parseFloat(value) : null;
+};

package/tsconfig.json

@@ -58,6 +58,8 @@
   },
   "exclude": [
     "node_modules",
-    "static"
+    "static",
+    "__tests__",
+    "**/*.js"
   ]
 }

package/tslint.json

@@ -20,7 +20,6 @@
     "no-console": [true, "warn", "error"],
     "switch-default": true,
     "no-empty-interface": true,
-    // "no-magic-numbers": [true, 0, -1, 1, 2, 10, 8, 16],
     "no-parameter-reassignment": true,
     "no-duplicate-switch-case": true,
     "no-duplicate-imports": true,

package/utils.ts

@@ -35,7 +35,9 @@ export {
   sliceLessThan,
   sliceMoreThan,
   buildQueryForSearch,
-  buildBodyForRequest
+  buildBodyForRequest,
+  priceParse,
+  getCents
 } from './source/framework/utils/CommonUtils';
 
 export {