OPHJOD-1009: Update outdated dependencies

.eslintrc.cjs

@@ -10,10 +10,10 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:jsx-a11y/recommended',
     'plugin:storybook/recommended',
-    'plugin:sonarjs/recommended',
+    'plugin:sonarjs/recommended-legacy',
     'prettier', // must be last, override other configs
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'storybook-static', '!.storybook'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'storybook-static', '!.storybook', '**.stories.tsx'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: ['./tsconfig.json', './tsconfig.node.json'],

lib/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { cx } from '../../cva';
-import { tidyClasses } from '../../utils';
+import { tidyClasses as tc } from '../../utils';
 
 export interface ButtonProps {
   /** Form ID to associate the button with */
@@ -57,17 +57,17 @@ const getVariantClassName = (variant: ButtonProps['variant'], disabled: ButtonPr
 
 const getDisabledClassName = (disabled: ButtonProps['disabled'], variant: ButtonProps['variant']) => {
   return disabled === false
-    ? tidyClasses(`
-      hover:ds-text-accent
-      focus-visible:ds-text-accent
-      active:ds-bg-accent
-      focus-visible:ds-outline-accent
-      focus-visible:ds-outline
-      focus-visible:ds-outline-[3px]
-      focus-visible:ds-outline-offset-[1.5px]
-      ${variant === 'accent' ? 'active:ds-text-accent' : 'active:ds-text-white'}
-      active:ds-outline-0
-    `)
+    ? tc([
+        'hover:ds-text-accent',
+        'focus-visible:ds-text-accent',
+        'active:ds-bg-accent',
+        'focus-visible:ds-outline-accent',
+        'focus-visible:ds-outline',
+        'focus-visible:ds-outline-[3px]',
+        'focus-visible:ds-outline-offset-[1.5px]',
+        variant === 'accent' ? 'active:ds-text-accent' : 'active:ds-text-white',
+        'active:ds-outline-0',
+      ])
     : 'disabled:ds-text-inactive-gray disabled:ds-cursor-not-allowed';
 };
 
@@ -79,7 +79,7 @@ const getButtonClassName = ({
   disabled,
   LinkComponent,
 }: Partial<ButtonProps> & { leftIcon: boolean; rightIcon: boolean }) =>
-  tidyClasses([
+  tc([
     LinkComponent ? 'ds-inline-flex' : 'ds-flex',
     'ds-items-center',
     'ds-gap-4',
@@ -118,9 +118,9 @@ export const Button = ({
   return LinkComponent ? (
     <LinkComponent>
       <span className={buttonClassName}>
-        {leftIcon && <>{icon}</>}
-        {onlyIcon ? <>{icon}</> : <span className={spanClassName}>{label}</span>}
-        {rightIcon && <>{icon}</>}
+        {leftIcon && icon}
+        {onlyIcon ? icon : <span className={spanClassName}>{label}</span>}
+        {rightIcon && icon}
       </span>
     </LinkComponent>
   ) : (
@@ -131,9 +131,9 @@ export const Button = ({
       onClick={onClick}
       className={buttonClassName}
     >
-      {leftIcon && <>{icon}</>}
-      {onlyIcon ? <>{icon}</> : <span className={spanClassName}>{label}</span>}
-      {rightIcon && <>{icon}</>}
+      {leftIcon && icon}
+      {onlyIcon ? icon : <span className={spanClassName}>{label}</span>}
+      {rightIcon && icon}
     </button>
   );
 };

lib/components/Checkbox/Checkbox.test.tsx

@@ -10,7 +10,7 @@ const myValue = 'myValue';
 describe('Checkbox', () => {
   it('renders correctly', () => {
     const { container } = render(
-      <Checkbox name="myCheckbox" label={label} ariaLabel={label} onChange={vi.fn} value={myValue} checked={false} />,
+      <Checkbox name="myCheckbox" label={label} ariaLabel={label} onChange={vi.fn()} value={myValue} checked={false} />,
     );
     const checkbox = screen.getByLabelText(label);
     expect(checkbox).toBeInTheDocument();
@@ -41,7 +41,7 @@ describe('Checkbox', () => {
         name="myCheckbox"
         label={label}
         ariaLabel={label}
-        onChange={vi.fn}
+        onChange={vi.fn()}
         value={myValue}
         checked={false}
         disabled
@@ -53,7 +53,7 @@ describe('Checkbox', () => {
 
   it('checks the checkbox', () => {
     render(
-      <Checkbox name="myCheckbox" label={label} ariaLabel={label} onChange={vi.fn} value={myValue} checked={true} />,
+      <Checkbox name="myCheckbox" label={label} ariaLabel={label} onChange={vi.fn()} value={myValue} checked={true} />,
     );
     const checkbox = screen.getByLabelText(label);
     expect(checkbox).toBeChecked();

lib/components/ConfirmDialog/ConfirmDialog.tsx

@@ -74,7 +74,7 @@ export const ConfirmDialog = ({
   };
 
   const confirmHandler = () => {
-    onConfirm && onConfirm();
+    onConfirm?.();
     hideDialog();
   };
 

lib/components/Datepicker/Datepicker.tsx

@@ -74,6 +74,7 @@ export const Datepicker = React.forwardRef<HTMLInputElement, DatepickerProps>(fu
   ref,
 ) {
   const helpId = React.useId();
+  const timeZone = 'Europe/Helsinki';
 
   return (
     <ArkDatePicker.Root
@@ -84,7 +85,7 @@ export const Datepicker = React.forwardRef<HTMLInputElement, DatepickerProps>(fu
       }}
       value={value ? [parseDate(value)] : undefined}
       locale="fi-FI"
-      timeZone="Europe/Helsinki"
+      timeZone={timeZone}
       className="ds-w-full"
       isDateUnavailable={(date) => isInvalidYear(date.year)}
     >
@@ -140,10 +141,10 @@ export const Datepicker = React.forwardRef<HTMLInputElement, DatepickerProps>(fu
                         </ArkDatePicker.TableRow>
                       </ArkDatePicker.TableHead>
                       <ArkDatePicker.TableBody>
-                        {datePicker.weeks.map((week, i) => (
-                          <ArkDatePicker.TableRow key={i}>
+                        {datePicker.weeks.map((week) => (
+                          <ArkDatePicker.TableRow key={week[0].toDate(timeZone).toISOString()}>
                             {week.map((day) => (
-                              <ArkDatePicker.TableCell key={`${day.day}_${i}`} value={day}>
+                              <ArkDatePicker.TableCell key={day.day} value={day}>
                                 <ArkDatePicker.TableCellTrigger className={getDayCellClasses(datePicker, day)} asChild>
                                   <button type="button" disabled={datePicker.isUnavailable(day)}>
                                     {day.day}
@@ -166,10 +167,10 @@ export const Datepicker = React.forwardRef<HTMLInputElement, DatepickerProps>(fu
                     <Header />
                     <ArkDatePicker.Table>
                       <ArkDatePicker.TableBody>
-                        {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, i) => (
-                          <ArkDatePicker.TableRow key={i}>
+                        {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months) => (
+                          <ArkDatePicker.TableRow key={months[0].label}>
                             {months.map((month) => (
-                              <ArkDatePicker.TableCell key={month.label} value={month.value}>
+                              <ArkDatePicker.TableCell key={`_${month.label}`} value={month.value}>
                                 <ArkDatePicker.TableCellTrigger className={tableCellClasses}>
                                   {month.label}
                                 </ArkDatePicker.TableCellTrigger>
@@ -190,10 +191,10 @@ export const Datepicker = React.forwardRef<HTMLInputElement, DatepickerProps>(fu
                     <Header />
                     <ArkDatePicker.Table>
                       <ArkDatePicker.TableBody>
-                        {datePicker.getYearsGrid({ columns: 4 }).map((years, i) => (
-                          <ArkDatePicker.TableRow key={`year_${i}`}>
+                        {datePicker.getYearsGrid({ columns: 4 }).map((years) => (
+                          <ArkDatePicker.TableRow key={years[0].label}>
                             {years.map((year) => (
-                              <ArkDatePicker.TableCell key={year.label} value={year.value}>
+                              <ArkDatePicker.TableCell key={`_${year.label}`} value={year.value}>
                                 <ArkDatePicker.TableCellTrigger className={getYearCellClasses(year)} asChild>
                                   <button type="button" disabled={isInvalidYear(year.value)}>
                                     {year.label}

lib/components/Pagination/Pagination.test.tsx

@@ -38,7 +38,7 @@ describe('Pagination', () => {
 
     const { container } = renderPagination(props);
 
-    const pageElements = screen.getAllByRole('button', { name: /[0-9]+/ });
+    const pageElements = screen.getAllByRole('button', { name: /\d+/ });
     expect(pageElements.length).toBe(4);
     expect(container.firstChild).toMatchSnapshot();
   });
@@ -55,7 +55,7 @@ describe('Pagination', () => {
 
     const { container } = renderPagination(props);
 
-    const pageElements = screen.getAllByRole('button', { name: /[0-9]+/ });
+    const pageElements = screen.getAllByRole('button', { name: /\d+/ });
     expect(pageElements.length).toBe(6);
     expect(container.firstChild).toMatchSnapshot();
   });

lib/components/Pagination/Pagination.tsx

@@ -68,6 +68,8 @@ export const Pagination = ({
                 {page.value}
               </ArkPagination.Item>
             ) : (
+              // The page object for ellipsis does not contain a value, so index must be used as a key.
+              // eslint-disable-next-line sonarjs/no-array-index-key
               <ArkPagination.Ellipsis key={`ellipsis_${index}`} index={index} className={getClassName()}>
                 <MdMoreHoriz size={24} />
               </ArkPagination.Ellipsis>

lib/components/PathProgress/PathProgress.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GrTarget } from 'react-icons/gr';
 import { MdCheck, MdOutlineFlag } from 'react-icons/md';
-import { tidyClasses } from '../../utils';
+import { tidyClasses as tc } from '../../utils';
 
 export interface PathProgressProps {
   steps: number;
@@ -32,7 +32,7 @@ export const PathProgress = ({ steps = 5, currentStep = 0, selectedStep, onClick
       <span className="ds-absolute ds-top-0 ds-left-[50%] ds-transform -ds-translate-x-[50%] ds-bg-white ds-w-2 ds-h-full" />
       <button
         type="button"
-        className={tidyClasses(`
+        className={tc(`
           ds-mb-6
           ${baseClasses}
           ${getActiveClasses(0)}
@@ -44,23 +44,23 @@ export const PathProgress = ({ steps = 5, currentStep = 0, selectedStep, onClick
       {Array.from({ length: steps }).map((_, index) => (
         <button
           type="button"
-          key={index}
-          className={tidyClasses(`
-            ds-text-button-lg
-            ds-mb-6
-            ${baseClasses}
-            ${getActiveClasses(index + 1)}
-            ${index < 2 ? 'ds-mt-auto' : ''}
-            ${selectedStep === index + 1 ? 'ds-flex ds-items-center ds-justify-center' : ''}
-          `)}
+          key={index} // eslint-disable-line sonarjs/no-array-index-key
+          className={tc([
+            'ds-text-button-lg',
+            'ds-mb-6',
+            baseClasses,
+            getActiveClasses(index + 1),
+            index < 2 ? 'ds-mt-auto' : '',
+            selectedStep === index + 1 ? 'ds-flex ds-items-center ds-justify-center' : '',
+          ])}
           onClick={handleOnClick(index + 1)}
         >
           {selectedStep === index + 1 ? <MdCheck size={24} /> : index + 1}
         </button>
       ))}
       <button
         type="button"
-        className={tidyClasses(`
+        className={tc(`
           ${baseClasses}
           ${getActiveClasses(steps + 1)}
           ds-mb-0

lib/components/SelectionCard/SelectionCard.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { useState } from '@storybook/preview-api';
-import React from 'react';
 import { useMediaQueries } from '../../main';
 import { SelectionCard } from './SelectionCard';
 
@@ -51,13 +50,13 @@ export const Default: Story = {
 export const MultipleWithHover: Story = {
   render: () => {
     const { sm } = useMediaQueries();
-    const [cardData, setCardData] = React.useState([
+    const [cardData, setCardData] = useState([
       { icon: '🙈', selected: false, label: 'Lorem ipsum' },
       { icon: '🙉', selected: false, label: 'Dolor sit amet' },
       { icon: '🙊', selected: false, label: 'Consectetur adipiscing elit' },
     ]);
 
-    const [info, setInfo] = React.useState('');
+    const [info, setInfo] = useState('');
 
     const onClick = (index: number) => () => {
       setCardData((prev) => {

lib/components/Toast/Toast.tsx

@@ -24,7 +24,7 @@ export const Toast = ({ text, icon, variant = 'success' }: ToastProps) => (
       .replace(/\s+/g, ' ')
       .trim()}
   >
-    {icon && <>{icon}</>}
+    {icon ?? null}
     {text}
   </div>
 );

lib/components/Tooltip/Tooltip.tsx

@@ -15,7 +15,7 @@ export interface TooltipProps extends TooltipOptions {
 }
 
 /** Tooltips show contextual help or information about specific components when a user hovers or focuses on them. */
-export function Tooltip({ children, ...options }: TooltipProps) {
+export const Tooltip = ({ children, ...options }: Readonly<TooltipProps>) => {
   const tooltip = useTooltip(options);
   return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
-}
+};