@sonardigital/carbon-ui 1.1.83 → 1.1.86

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.1.83",
+   "version": "1.1.86",
    "description": "",
    "main": "src/index.ts",
    "files": [

package/src/components/form/fields/FormBox.tsx

@@ -1,4 +1,4 @@
-import { Card, Stack } from '@mui/material';
+import { Card, Grow, Stack } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 
@@ -21,16 +21,18 @@ export function FormBox({
          render={({ field }) => (
             <Stack sx={{ position: 'relative' }}>
                {value === field.value && (
-                  <CheckCircleIcon
-                     sx={{
-                        width: 19,
-                        height: 19,
-                        position: 'absolute',
-                        top: 10,
-                        right: 10,
-                        color: `${color}.main`,
-                     }}
-                  />
+                  <Grow in={true} timeout={250}>
+                     <CheckCircleIcon
+                        sx={{
+                           width: 19,
+                           height: 19,
+                           position: 'absolute',
+                           top: 10,
+                           right: 10,
+                           color: `${color}.main`,
+                        }}
+                     />
+                  </Grow>
                )}
                <Card
                   // eslint-disable-next-line

package/src/components/layout/multisteps/hooks/useMultisteps.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { useMultistepsProps } from '../provider/MultistepsProvider';
 import { MultistepsContextType } from '../provider/MultistepsContext';
+import { maths } from '../../../../utils/maths/maths';
 
 export const useMultisteps = ({
    steps,
@@ -52,6 +53,8 @@ export const useMultisteps = ({
    return {
       steps,
       currentStepIndex: index,
+      currentStep: steps[index - 1] || null,
+      percentage: maths.formatNumber(maths.percentage(index, steps.length)),
       hover,
       setHover,
       goBack,

package/src/components/layout/multisteps/provider/MultistepsContext.ts

@@ -4,6 +4,8 @@ import { Step } from '../models';
 export interface MultistepsContextType {
    steps: Step[];
    currentStepIndex: number;
+   currentStep: Step | null;
+   percentage: string;
    hover: number | null;
    setHover: (index: number | null) => void;
    goNext: () => void;
@@ -15,6 +17,8 @@ export const MultistepsContext: Context<MultistepsContextType> =
    createContext<MultistepsContextType>({
       steps: [],
       currentStepIndex: 1,
+      currentStep: null,
+      percentage: '0.00',
       hover: null,
       setHover: () => {},
       goBack: () => {},

package/src/theme/constants/components.ts

@@ -1,5 +1,5 @@
 import { Theme } from '@emotion/react';
-import { Components, CssVarsTheme } from '@mui/material';
+import { Components, CssVarsTheme, linearProgressClasses } from '@mui/material';
 import { palette } from './palette';
 
 const defaultButtonStyle = {
@@ -222,6 +222,19 @@ export const components: Components<
          },
       },
    },
+   MuiLinearProgress: {
+      defaultProps: {
+         sx: {
+            [`& .${linearProgressClasses.bar}`]: {
+               borderRadius: 5,
+            },
+            width: '100%',
+            borderRadius: 100,
+            height: 8,
+            bgcolor: 'grey.200',
+         },
+      },
+   },
    MuiTextField: {
       defaultProps: {
          size: 'medium',

package/src/utils/maths/maths.test.ts

@@ -0,0 +1,122 @@
+import { maths } from './maths';
+
+describe('maths.parseNumber', () => {
+  it('returns a number unchanged', () => {
+    expect(maths.parseNumber(42)).toBe(42);
+    expect(maths.parseNumber(3.14159)).toBe(3.14159);
+  });
+
+  it('parses a plain string number', () => {
+    expect(maths.parseNumber('42')).toBe(42);
+    expect(maths.parseNumber('3.14')).toBe(3.14);
+  });
+
+  it('handles Italian decimal format (comma as decimal separator)', () => {
+    expect(maths.parseNumber('1,5')).toBe(1.5);
+    expect(maths.parseNumber('99,99')).toBe(99.99);
+  });
+
+  it('handles thousands separator (comma + dot present)', () => {
+    // "1,000.50" → comma treated as thousands separator → 1000.5
+    expect(maths.parseNumber('1,000.50')).toBe(1000.5);
+  });
+
+  it('returns 0 for NaN values', () => {
+    expect(maths.parseNumber('abc')).toBe(0);
+    expect(maths.parseNumber('')).toBe(0);
+  });
+
+  it('respects the decimals parameter', () => {
+    expect(maths.parseNumber(1.123456789, 2)).toBe(1.12);
+    expect(maths.parseNumber(1.123456789, 0)).toBe(1);
+    // Note: 1.005 is stored as 1.00499... in IEEE 754, so toFixed(2) = "1.00"
+    expect(maths.parseNumber(1.456, 2)).toBe(1.46);
+  });
+
+  it('defaults to 5 decimal places', () => {
+    expect(maths.parseNumber(1.123456789)).toBe(1.12346);
+  });
+});
+
+describe('maths.percentage', () => {
+  it('calculates the correct percentage', () => {
+    expect(maths.percentage(50, 200)).toBe(25);
+    expect(maths.percentage(1, 3)).toBe(maths.parseNumber((1 * 100) / 3));
+  });
+
+  it('returns 0 when value is 0', () => {
+    expect(maths.percentage(0, 100)).toBe(0);
+  });
+
+  it('returns 0 when total is 0 (no division by zero)', () => {
+    expect(maths.percentage(50, 0)).toBe(0);
+  });
+
+  it('returns 0 when either argument is undefined', () => {
+    expect(maths.percentage(void 0, 100)).toBe(0);
+    expect(maths.percentage(50, void 0)).toBe(0);
+    expect(maths.percentage(void 0, void 0)).toBe(0);
+  });
+
+  it('accepts string arguments', () => {
+    expect(maths.percentage('50', '200')).toBe(25);
+    expect(maths.percentage('1,5', '3')).toBe(50); // 1.5 / 3 * 100
+  });
+
+  it('returns 0 for negative values', () => {
+    expect(maths.percentage(-10, 100)).toBe(0);
+    expect(maths.percentage(10, -100)).toBe(0);
+  });
+});
+
+describe('maths.average', () => {
+  it('calculates the average of numbers', () => {
+    expect(maths.average([10, 20, 30])).toBe(20);
+    expect(maths.average([1, 2, 3, 4])).toBe(2.5);
+  });
+
+  it('returns 0 for an empty array', () => {
+    expect(maths.average([])).toBe(0);
+  });
+
+  it('handles a single value', () => {
+    expect(maths.average([42])).toBe(42);
+  });
+
+  it('handles string numbers in the array', () => {
+    expect(maths.average(['10', '20', '30'])).toBe(20);
+  });
+
+  it('handles Italian decimal format strings', () => {
+    expect(maths.average(['1,5', '2,5'])).toBe(2);
+  });
+});
+
+describe('maths.formatNumber', () => {
+  it('formats an integer with no decimals by default', () => {
+    expect(maths.formatNumber(1234)).toBe('1234');
+  });
+
+  it('formats with the specified number of decimal places', () => {
+    expect(maths.formatNumber(1.5, 2)).toBe('1,50');
+    expect(maths.formatNumber(1.5, 3)).toBe('1,500');
+  });
+
+  it('uses the specified separator', () => {
+    expect(maths.formatNumber(1.5, 2, '.')).toBe('1.50');
+  });
+
+  it('returns "0" for NaN or Infinity', () => {
+    expect(maths.formatNumber(NaN)).toBe('0');
+    expect(maths.formatNumber(Infinity)).toBe('0');
+  });
+
+  it('parses Italian comma-as-decimal string input', () => {
+    expect(maths.formatNumber('1,5', 2)).toBe('1,50');
+  });
+
+  it('handles zero', () => {
+    expect(maths.formatNumber(0)).toBe('0');
+    expect(maths.formatNumber(0, 2)).toBe('0,00');
+  });
+});

package/src/utils/maths/maths.ts

@@ -0,0 +1,62 @@
+export type Decimals = 0 | 1 | 2 | 3 | 4 | 5;
+
+class MathUtils {
+  percentage = (value: string | number | undefined, total: string | number | undefined): number => {
+    value = this.parseNumber(value?.toString() ?? 0);
+    total = this.parseNumber(total?.toString() ?? 0);
+    return value <= 0 || total <= 0 ? 0 : this.parseNumber((value * 100) / total);
+  };
+
+  parseNumber = (value: string | number, decimals: Decimals = 5): number => {
+    let numericValue: number;
+
+    if (typeof value === 'string') {
+      if (value.includes(',') && !value.includes('.')) {
+        numericValue = parseFloat(value.replace(',', '.'));
+      } else {
+        numericValue = parseFloat(value.replace(/,/g, ''));
+      }
+    } else {
+      numericValue = value;
+    }
+
+    if (isNaN(numericValue) || !isFinite(numericValue)) {
+      return 0;
+    }
+
+    return parseFloat(numericValue?.toFixed(decimals));
+  };
+
+  average = (values: (string | number)[]): number => {
+    let total = 0;
+    values.forEach((value) => {
+      total += this.parseNumber(value ?? 0);
+    });
+    return values?.length > 0 ? total / values.length : 0;
+  };
+
+  formatNumber = (value: string | number, decimals: Decimals = 0, separator = ','): string => {
+    let numericValue: number;
+    if (typeof value === 'string') {
+      if (value.includes(',') && !value.includes('.')) {
+        numericValue = parseFloat(value.replace(',', '.'));
+      } else {
+        numericValue = parseFloat(value.replace(',', ''));
+      }
+    } else {
+      numericValue = value;
+    }
+
+    if (isNaN(numericValue) || !isFinite(numericValue)) {
+      return '0';
+    }
+
+    const fixedValue = numericValue.toFixed(decimals);
+
+    const [integerPart, decimalPart] = fixedValue.split('.');
+
+    return decimals > 0 ? `${integerPart + separator + decimalPart}` : integerPart;
+  };
+}
+
+export const maths = new MathUtils();