richie-education 2.34.0 → 2.34.1-dev4

package/js/components/AddressesManagement/index.spec.tsx

@@ -6,7 +6,7 @@ import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import countries from 'i18n-iso-countries';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';

package/js/components/AddressesManagement/index.tsx

@@ -1,4 +1,4 @@
-import { Children, forwardRef, useEffect, useState } from 'react';
+import { Children, useEffect, useState, RefAttributes } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
 import AddressForm, { type AddressFormValues } from 'components/AddressesManagement/AddressForm';
@@ -7,7 +7,6 @@ import { Icon, IconTypeEnum } from 'components/Icon';
 import RegisteredAddress from 'components/RegisteredAddress';
 import { useAddressesManagement } from 'hooks/useAddressesManagement';
 import type * as Joanie from 'types/Joanie';
-import { Address } from 'types/Joanie';
 import { Maybe } from 'types/utils';
 
 // constant used as `address.id` for local address
@@ -106,147 +105,142 @@ export const messages = defineMessages({
   },
 });
 
-interface AddressesManagementProps {
+interface AddressesManagementProps extends RefAttributes<HTMLDivElement> {
   handleClose: () => void;
   selectAddress: (address: Joanie.Address) => void;
 }
 
-const AddressesManagement = forwardRef<HTMLDivElement, AddressesManagementProps>(
-  ({ handleClose, selectAddress }, ref) => {
-    const intl = useIntl();
-    const [editedAddress, setEditedAddress] = useState<Maybe<Joanie.Address>>();
-    const {
-      methods: { setError, create, update, remove, promote },
-      states: { error },
-      ...addresses
-    } = useAddressesManagement();
+const AddressesManagement = ({ handleClose, selectAddress, ref }: AddressesManagementProps) => {
+  const intl = useIntl();
+  const [editedAddress, setEditedAddress] = useState<Maybe<Joanie.Address>>();
+  const {
+    methods: { setError, create, update, remove, promote },
+    states: { error },
+    ...addresses
+  } = useAddressesManagement();
 
-    /**
-     * Sort addresses ascending by title according to the locale
-     *
-     * @param {Joanie.Address} a
-     * @param {Joanie.Address} b
-     * @returns {Joanie.Address[]} Sorted addresses ascending by title
-     */
-    const sortAddressByTitleAsc = (a: Joanie.Address, b: Joanie.Address) => {
-      return a.title.localeCompare(b.title, [intl.locale, intl.defaultLocale]);
-    };
+  /**
+   * Sort addresses ascending by title according to the locale
+   *
+   * @param {Joanie.Address} a
+   * @param {Joanie.Address} b
+   * @returns {Joanie.Address[]} Sorted addresses ascending by title
+   */
+  const sortAddressByTitleAsc = (a: Joanie.Address, b: Joanie.Address) => {
+    return a.title.localeCompare(b.title, [intl.locale, intl.defaultLocale]);
+  };
 
-    /**
-     * update `selectedAddress` state with the address provided
-     * then close the address management form
-     *
-     * @param {Joanie.Address} address
-     */
-    const handleSelect = (address: Joanie.Address) => {
-      setError(undefined);
-      selectAddress(address);
-      handleClose();
-    };
+  /**
+   * update `selectedAddress` state with the address provided
+   * then close the address management form
+   *
+   * @param {Joanie.Address} address
+   */
+  const handleSelect = (address: Joanie.Address) => {
+    setError(undefined);
+    selectAddress(address);
+    handleClose();
+  };
 
-    /**
-     * Create a new address according to form values
-     * then update `selectedAddress` state with this new one.
-     * If `save` checkbox input is checked, the address is persisted
-     * otherwise it is only stored through the `selectedAddress` state.
-     *
-     * @param {AddressFormValues} formValues address fields to update
-     */
-    const handleCreate = async ({ save, ...address }: AddressFormValues) => {
-      if (save) {
-        await create(address, { onSuccess: handleSelect });
-      } else {
-        handleSelect({
-          id: LOCAL_BILLING_ADDRESS_ID,
-          is_main: false,
-          ...address,
-        });
-      }
-    };
+  /**
+   * Create a new address according to form values
+   * then update `selectedAddress` state with this new one.
+   * If `save` checkbox input is checked, the address is persisted
+   * otherwise it is only stored through the `selectedAddress` state.
+   *
+   * @param {AddressFormValues} formValues address fields to update
+   */
+  const handleCreate = async ({ save, ...address }: AddressFormValues) => {
+    if (save) {
+      await create(address, { onSuccess: handleSelect });
+    } else {
+      handleSelect({
+        id: LOCAL_BILLING_ADDRESS_ID,
+        is_main: false,
+        ...address,
+      });
+    }
+  };
 
-    /**
-     * Update the `editedAddress` with new values provided as argument
-     * then clear `editedAddress` state if request succeeded.
-     *
-     * @param {AddressFormValues} formValues address fields to update
-     */
-    const handleUpdate = async ({ save, ...newAddress }: AddressFormValues) => {
-      update(
-        {
-          ...editedAddress!,
-          ...newAddress,
-        },
-        {
-          onSuccess: () => setEditedAddress(undefined),
-        },
-      );
-    };
+  /**
+   * Update the `editedAddress` with new values provided as argument
+   * then clear `editedAddress` state if request succeeded.
+   *
+   * @param {AddressFormValues} formValues address fields to update
+   */
+  const handleUpdate = async ({ save, ...newAddress }: AddressFormValues) => {
+    update(
+      {
+        ...editedAddress!,
+        ...newAddress,
+      },
+      {
+        onSuccess: () => setEditedAddress(undefined),
+      },
+    );
+  };
 
-    useEffect(() => {
-      setError(undefined);
-      if (editedAddress) {
-        document.querySelector<HTMLElement>('[name="address-form"] input')?.focus();
-      }
-    }, [editedAddress]);
+  useEffect(() => {
+    setError(undefined);
+    if (editedAddress) {
+      document.querySelector<HTMLElement>('[name="address-form"] input')?.focus();
+    }
+  }, [editedAddress]);
 
-    return (
-      <div className="AddressesManagement" ref={ref}>
-        <Button
-          className="AddressesManagement__closeButton"
-          color="tertiary"
-          size="small"
-          onClick={handleClose}
-        >
-          <Icon name={IconTypeEnum.CHEVRON_LEFT_OUTLINE} className="button__icon" />
-          <FormattedMessage {...messages.closeButton} />
-        </Button>
-        {error && <Banner message={error} type={BannerType.ERROR} rounded />}
-        {addresses.items.length > 0 ? (
-          <section className="address-registered">
-            <header>
-              <h2 className="h5">
-                <FormattedMessage {...messages.registeredAddresses} />
-              </h2>
-            </header>
-            <ul className="registered-addresses-list">
-              {Children.toArray(
-                addresses.items
-                  .sort(sortAddressByTitleAsc)
-                  .map((address) => (
-                    <RegisteredAddress
-                      address={address}
-                      edit={setEditedAddress}
-                      promote={promote}
-                      remove={remove}
-                      select={handleSelect}
-                    />
-                  )),
-              )}
-            </ul>
-          </section>
-        ) : null}
-        <section className={`address-form ${editedAddress ? 'address-form--highlighted' : ''}`}>
+  return (
+    <div className="AddressesManagement" ref={ref}>
+      <Button
+        className="AddressesManagement__closeButton"
+        color="tertiary"
+        size="small"
+        onClick={handleClose}
+      >
+        <Icon name={IconTypeEnum.CHEVRON_LEFT_OUTLINE} className="button__icon" />
+        <FormattedMessage {...messages.closeButton} />
+      </Button>
+      {error && <Banner message={error} type={BannerType.ERROR} rounded />}
+      {addresses.items.length > 0 ? (
+        <section className="address-registered">
           <header>
             <h2 className="h5">
-              {editedAddress ? (
-                <FormattedMessage
-                  {...messages.editAddress}
-                  values={{ title: editedAddress.title }}
-                />
-              ) : (
-                <FormattedMessage {...messages.addAddress} />
-              )}
+              <FormattedMessage {...messages.registeredAddresses} />
             </h2>
           </header>
-          <AddressForm
-            address={editedAddress}
-            handleReset={() => setEditedAddress(undefined)}
-            onSubmit={editedAddress ? handleUpdate : handleCreate}
-          />
+          <ul className="registered-addresses-list">
+            {Children.toArray(
+              addresses.items
+                .sort(sortAddressByTitleAsc)
+                .map((address) => (
+                  <RegisteredAddress
+                    address={address}
+                    edit={setEditedAddress}
+                    promote={promote}
+                    remove={remove}
+                    select={handleSelect}
+                  />
+                )),
+            )}
+          </ul>
         </section>
-      </div>
-    );
-  },
-);
+      ) : null}
+      <section className={`address-form ${editedAddress ? 'address-form--highlighted' : ''}`}>
+        <header>
+          <h2 className="h5">
+            {editedAddress ? (
+              <FormattedMessage {...messages.editAddress} values={{ title: editedAddress.title }} />
+            ) : (
+              <FormattedMessage {...messages.addAddress} />
+            )}
+          </h2>
+        </header>
+        <AddressForm
+          address={editedAddress}
+          handleReset={() => setEditedAddress(undefined)}
+          onSubmit={editedAddress ? handleUpdate : handleCreate}
+        />
+      </section>
+    </div>
+  );
+};
 
 export default AddressesManagement;

package/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -204,12 +204,10 @@ describe('<AbstractContractFrame />', () => {
     await user.click(button);
 
     // The dummy interface should be loading
-    screen.getByRole('heading', { name: 'Signing the contract ...' });
+    await screen.findByRole('heading', { name: 'Signing the contract ...' });
 
     // Then the signature check polling should be started
-    await waitFor(() => {
-      expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
-    });
+    await screen.findByRole('heading', { name: 'Verifying signature ...' });
     expect(
       screen.getByText(
         'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',

package/js/components/ContractFrame/AbstractContractFrame.tsx

@@ -134,7 +134,7 @@ const ContractFrameContent = ({
   const [signatureType, setSignatureType] = useState<SignatureType>();
   const [invitationLink, setInvitationLink] = useState<Maybe<string>>();
   const [error, setError] = useState<Maybe<string>>();
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
 
   const setErrored = (e: string) => {
     setStep(ContractSteps.ERROR);

package/js/components/Icon/index.stories.tsx

@@ -29,7 +29,7 @@ type IconContainerProps = {
 };
 const IconContainer = ({ name, enumKey }: IconContainerProps) => {
   const [showTooltip, setShowTooltip] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
   const ENUM_NAME = 'IconTypeEnum';
 
   const styleContainer: CSSProperties = {

package/js/components/PaymentInterfaces/PayplugLightbox.tsx

@@ -17,7 +17,7 @@ const PayplugLightbox = ({
   onError,
   ...props
 }: PaymentInterfaceProps<PayplugPayment>) => {
-  const ref = useRef<ReturnType<typeof setTimeout>>();
+  const ref = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   /** type guard to check if the payment is a payment one click */
   const isPaidPayment = (p: PayplugPayment) => p?.is_paid === true;

package/js/components/SaleTunnel/SaleTunnelSavePaymentMethod/index.tsx

@@ -47,7 +47,7 @@ const messages = defineMessages({
 });
 
 const SaleTunnelSavePaymentMethod = () => {
-  const initialCreditCards = useRef<CreditCard[]>();
+  const initialCreditCards = useRef<CreditCard[]>([]);
   const [shouldPoll, setShouldPoll] = useState(false);
   const [payment, setPayment] = useState<Payment>();
   const [error, setError] = useState<string>();
@@ -71,7 +71,7 @@ const SaleTunnelSavePaymentMethod = () => {
   };
 
   const waitForNewCreditCard = () => {
-    const initialIds = initialCreditCards.current!.map((cc) => cc.id);
+    const initialIds = initialCreditCards.current.map((cc) => cc.id);
     const newCard = creditCardsQuery.items.find((cc) => !initialIds.includes(cc.id));
 
     if (!newCard) return;

package/js/hooks/useCreditCards/index.spec.tsx

@@ -208,8 +208,9 @@ describe('useCreditCards', () => {
     await act(async () => {
       responseDeferred.resolve({});
     });
-
-    expect(result.current.states.updating).toBe(false);
+    await waitFor(() => {
+      expect(result.current.states.updating).toBe(false);
+    });
     expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBe(undefined);
   });

package/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.spec.tsx

@@ -181,7 +181,7 @@ describe('<DahsboardEditCreditCard/>', () => {
     await screen.findByText('Credit cards');
 
     // The title is correctly updated.
-    screen.getByRole('heading', {
+    await screen.findByRole('heading', {
       level: 6,
       name: creditCardUpdated.title,
     });

package/js/pages/TeacherDashboardContractsLayout/hooks/useCheckContractArchiveExists/index.spec.tsx

@@ -98,7 +98,7 @@ describe.each([
     expect(mockCheckArchive).not.toHaveBeenCalled();
   });
 
-  it('should check if archive exist when a id is stored', async () => {
+  it('should check if archive exist when an id is stored', async () => {
     storeContractArchiveId({
       ...localStorageArchiveFilters,
       contractArchiveId: faker.string.uuid(),
@@ -115,7 +115,9 @@ describe.each([
       expect(mockCheckArchive).toHaveBeenCalledTimes(1);
     });
 
-    expect(result.current.isPolling).toBe(false);
+    await waitFor(() => {
+      expect(result.current.isPolling).toBe(false);
+    });
     expect(result.current.isContractArchiveExists).toBe(true);
   });
 

package/js/pages/TeacherDashboardContractsLayout/hooks/useCheckContractArchiveExists/index.tsx

@@ -25,7 +25,7 @@ const useCheckContractArchiveExist = (
   // stay null until fetched
   const [isContractArchiveExists, setIsContractArchiveExists] = useState<Nullable<boolean>>(null);
 
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
 
   // This method will check if the archive exists on the server
   // option.polling === true will recursivly poll archive existence

package/js/pages/TeacherDashboardOrganizationCourseLoader/index.spec.tsx

@@ -41,6 +41,9 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
   beforeEach(() => {
     nbApiCalls = joanieSessionData.nbSessionApiRequest;
   });
+  afterEach(() => {
+    fetchMock.restore();
+  });
 
   it('should render', async () => {
     const organization = OrganizationFactory().one();
@@ -59,6 +62,10 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
       `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
       mockPaginatedResponse(CourseProductRelationFactory().many(15), 15, false),
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&page=1`,
+      [],
+    );
 
     render(<TeacherDashboardOrganizationCourseLoader />, {
       routerOptions: {
@@ -70,6 +77,7 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
 
     nbApiCalls += 1; // course api call
     nbApiCalls += 1; // course-product-relations api call
+    nbApiCalls += 1; // contracts api call
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
@@ -78,11 +86,6 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
     expect(calledUrls).toContain(
       `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
     );
-
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&page=1`,
-      [],
-    );
     await expectNoSpinner('Loading organization...');
 
     expect(

package/js/utils/test/wrappers/types.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { QueryClient } from '@tanstack/query-core';
 import { RenderOptions as TestingLibraryRenderOptions } from '@testing-library/react';
 import { Nullable } from 'types/utils';
@@ -19,7 +19,7 @@ interface QueryOptions {
  * @property queryOptions options to configure a custom client used by react-query for a test
  */
 export interface AppWrapperProps {
-  wrapper?: Nullable<(props: PropsWithChildren<{ options?: AppWrapperProps }>) => JSX.Element>;
+  wrapper?: Nullable<(props: PropsWithChildren<{ options?: AppWrapperProps }>) => ReactElement>;
   intlOptions?: IntlWrapperProps;
   queryOptions?: QueryOptions;
   historyOptions?: History;

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal/index.tsx

@@ -83,7 +83,7 @@ enum ComponentStates {
 export const OrderPaymentRetryModal = ({ installment, order, ...props }: Props) => {
   const intl = useIntl();
   const API = useJoanieApi();
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const [payment, setPayment] = useState<Payment>();
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);

package/js/widgets/Dashboard/components/SearchBar/index.spec.tsx

@@ -4,7 +4,7 @@ import { render } from 'utils/test/render';
 import { PresentationalAppWrapper } from 'utils/test/wrappers/PresentationalAppWrapper';
 import SearchBar from '.';
 
-describe('Dashbaord/components/SearchBar', () => {
+describe('Dashboard/components/SearchBar', () => {
   it('should render', () => {
     render(<SearchBar onSubmit={jest.fn()} />, { wrapper: PresentationalAppWrapper });
     expect(screen.getByRole('textbox', { name: /Search/ })).toBeInTheDocument();

package/js/widgets/Dashboard/components/SearchResultsCount/index.spec.tsx

@@ -3,7 +3,7 @@ import { render } from 'utils/test/render';
 import { PresentationalAppWrapper } from 'utils/test/wrappers/PresentationalAppWrapper';
 import SearchResultsCount from '.';
 
-describe('Dashbaord/components/SearchResultsCount', () => {
+describe('Dashboard/components/SearchResultsCount', () => {
   it('should render singular message', () => {
     render(<SearchResultsCount nbResults={1} />, {
       wrapper: PresentationalAppWrapper,

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/EnrollableCourseRunList.tsx

@@ -139,11 +139,12 @@ const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
         <ol className="course-runs-list">
           {Children.toArray(
             courseRuns.map((courseRun) => (
-              <li className="course-runs-item form-field">
+              <li key={`${order.id}|${courseRun.id}`} className="course-runs-item form-field">
                 <input
                   className="form-field__radio-input"
                   type="radio"
                   id={`${order.id}|${courseRun.id}`}
+                  data-testid={`radio-input-${order.id}-${courseRun.id}`}
                   name={order.id}
                   disabled={needsSignature}
                   aria-label={intl.formatMessage(messages.ariaSelectCourseRun, {

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/index.spec.tsx

@@ -166,11 +166,13 @@ describe('CourseProductCourseRuns', () => {
         );
 
         // - A radio input
-        screen.getByRole('radio', {
-          name: `Select course run from ${dateFormatter.format(
+        const $input = screen.getByTestId(`radio-input-${order.id}-${courseRun.id}`);
+        expect($input).toHaveAttribute('type', 'radio');
+        expect($input).toHaveAccessibleName(
+          `Select course run from ${dateFormatter.format(
             new Date(courseRun.start),
           )} to ${dateFormatter.format(new Date(courseRun.end))}.`,
-        });
+        );
       });
 
       // A call to action should be displayed
@@ -215,7 +217,7 @@ describe('CourseProductCourseRuns', () => {
       });
 
       // A spinner should be displayed
-      screen.getByRole('status', { name: 'Enrolling...' });
+      await screen.findByRole('status', { name: 'Enrolling...' });
 
       await act(async () => {
         enrollmentDeferred.resolve(HttpStatusCode.OK);

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.tsx

@@ -195,11 +195,7 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
       step,
     },
     dispatch,
-  ] = useReducer<React.Reducer<ReducerState, ReducerAction>, ReducerState>(
-    reducer,
-    initialState(user, props.courseRun, enrollmentIsActive),
-    (s) => s,
-  );
+  ] = useReducer(reducer, initialState(user, props.courseRun, enrollmentIsActive));
 
   const setEnroll = useCallback(
     async (isActive: boolean = true) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.34.0",
+  "version": "2.34.1-dev4",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,74 +38,74 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.26.0",
+    "@babel/core": "7.26.9",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.25.9",
-    "@babel/preset-env": "7.26.0",
-    "@babel/preset-react": "7.25.9",
+    "@babel/plugin-transform-modules-commonjs": "7.26.3",
+    "@babel/preset-env": "7.26.9",
+    "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@faker-js/faker": "9.2.0",
-    "@formatjs/cli": "6.3.11",
-    "@formatjs/intl-relativetimeformat": "11.4.5",
-    "@hookform/resolvers": "3.9.1",
+    "@faker-js/faker": "9.5.0",
+    "@formatjs/cli": "6.6.1",
+    "@formatjs/intl-relativetimeformat": "11.4.10",
+    "@hookform/resolvers": "4.1.0",
     "@lyracom/embedded-form-glue": "1.4.2",
-    "@openfun/cunningham-react": "2.9.4",
-    "@openfun/cunningham-tokens": "2.1.1",
-    "@sentry/browser": "8.42.0",
-    "@sentry/types": "8.42.0",
-    "@storybook/addon-actions": "8.4.6",
-    "@storybook/addon-essentials": "8.4.6",
-    "@storybook/addon-interactions": "8.4.6",
-    "@storybook/addon-links": "8.4.6",
-    "@storybook/react": "8.4.6",
-    "@storybook/react-webpack5": "8.4.6",
-    "@storybook/test": "8.4.6",
-    "@tanstack/query-core": "5.62.1",
-    "@tanstack/query-sync-storage-persister": "5.62.1",
-    "@tanstack/react-query": "5.62.1",
-    "@tanstack/react-query-devtools": "5.62.1",
-    "@tanstack/react-query-persist-client": "5.62.1",
+    "@openfun/cunningham-react": "3.0.0",
+    "@openfun/cunningham-tokens": "2.2.0",
+    "@sentry/browser": "9.1.0",
+    "@sentry/types": "9.1.0",
+    "@storybook/addon-actions": "8.5.6",
+    "@storybook/addon-essentials": "8.5.6",
+    "@storybook/addon-interactions": "8.5.6",
+    "@storybook/addon-links": "8.5.6",
+    "@storybook/react": "8.5.6",
+    "@storybook/react-webpack5": "8.5.6",
+    "@storybook/test": "8.5.6",
+    "@tanstack/query-core": "5.66.3",
+    "@tanstack/query-sync-storage-persister": "5.66.3",
+    "@tanstack/react-query": "5.66.3",
+    "@tanstack/react-query-devtools": "5.66.3",
+    "@tanstack/react-query-persist-client": "5.66.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.0.1",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/fetch-mock": "7.3.8",
-    "@types/iframe-resizer": "3.5.13",
+    "@types/iframe-resizer": "4.0.0",
     "@types/jest": "29.5.14",
     "@types/js-cookie": "3.0.6",
     "@types/lodash-es": "4.17.12",
     "@types/node-fetch": "2.6.12",
     "@types/query-string": "6.3.0",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.10",
     "@types/react-autosuggest": "10.1.11",
-    "@types/react-dom": "18.3.1",
+    "@types/react-dom": "19.0.4",
     "@types/react-modal": "3.16.3",
-    "@typescript-eslint/eslint-plugin": "8.17.0",
-    "@typescript-eslint/parser": "8.17.0",
+    "@typescript-eslint/eslint-plugin": "8.24.0",
+    "@typescript-eslint/parser": "8.24.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.39.0",
+    "core-js": "3.40.0",
     "downshift": "9.0.8",
     "eslint": ">=8.57.0 <9",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-import-resolver-webpack": "0.13.9",
-    "eslint-plugin-compat": "6.0.1",
-    "eslint-plugin-formatjs": "5.2.5",
+    "eslint-config-prettier": "10.0.1",
+    "eslint-import-resolver-webpack": "0.13.10",
+    "eslint-plugin-compat": "6.0.2",
+    "eslint-plugin-formatjs": "5.2.14",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "5.0.0",
-    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "5.1.0",
+    "eslint-plugin-storybook": "0.11.3",
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
-    "glob": "11.0.0",
+    "glob": "11.0.1",
     "i18n-iso-countries": "7.13.0",
     "iframe-resizer": "<5",
     "intl-pluralrules": "2.0.1",
@@ -114,35 +114,37 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.6.6",
+    "msw": "2.7.0",
     "node-fetch": ">2.6.6 <3",
-    "nodemon": "3.1.7",
-    "prettier": "3.4.1",
+    "nodemon": "3.1.9",
+    "prettier": "3.5.1",
     "query-string": "9.1.1",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "react-autosuggest": "10.1.0",
-    "react-dom": "18.3.1",
-    "react-hook-form": "7.53.2",
-    "react-intl": "7.0.1",
-    "react-modal": "3.16.1",
-    "react-router": "7.0.1",
-    "sass": "1.81.0",
+    "react-dom": "19.0.0",
+    "react-hook-form": "7.54.2",
+    "react-intl": "7.1.6",
+    "react-modal": "3.16.3",
+    "react-router": "7.1.5",
+    "sass": "1.85.0",
     "source-map-loader": "5.0.0",
-    "storybook": "8.4.6",
+    "storybook": "8.5.6",
     "tsconfig-paths-webpack-plugin": "4.2.0",
-    "typescript": "5.7.2",
-    "uuid": "11.0.3",
-    "webpack": "5.96.1",
-    "webpack-cli": "5.1.4",
+    "typescript": "5.7.3",
+    "uuid": "11.0.5",
+    "webpack": "5.98.0",
+    "webpack-cli": "6.0.1",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
     "yargs": "17.7.2",
-    "yup": "1.4.0"
+    "yup": "1.6.1"
   },
   "resolutions": {
     "@testing-library/dom": "10.4.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "msw": {
     "workerDirectory": "../richie/static/richie/js"
@@ -152,7 +154,7 @@
     "yarn": "1.22.22"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.4.6",
-    "@storybook/addon-webpack5-compiler-babel": "3.0.3"
+    "@storybook/addon-mdx-gfm": "8.5.6",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.5"
   }
 }

package/scss/components/_styleguide.scss

@@ -5,7 +5,8 @@
 // Draw a background grid in pure CSS
 @mixin draw-grid($line-color: null, $border-color: null) {
   @if $line-color {
-    background: linear-gradient(-90deg, $line-color $onepixel, transparent $onepixel),
+    background:
+      linear-gradient(-90deg, $line-color $onepixel, transparent $onepixel),
       linear-gradient($line-color $onepixel, transparent $onepixel),
       linear-gradient(-90deg, $line-color $onepixel, transparent $onepixel),
       linear-gradient($line-color $onepixel, transparent $onepixel),

package/scss/vendors/css/cunningham-tokens.css

@@ -132,6 +132,7 @@
   --c--theme--breakpoints--lg: 992px;
   --c--theme--breakpoints--xl: 1200px;
   --c--theme--breakpoints--xxl: 1400px;
+  --c--components--tabs--border-bottom-color: var(--c--theme--colors--greyscale-300);
   --c--components--button--font-family: Montserrat;
   --c--components--dashboardlistavatar--saturation: 30;
   --c--components--dashboardlistavatar--lightness: 55;