chore: upgrade to react 19

update JSX usage
add changeset

Author: FRSgit

.changeset/loud-shoes-promise.md

@@ -0,0 +1,5 @@
+---
+'@storefront-ui/react': major
+---
+
+- **[BREAKING][CHANGED]** upgrade to React 19. There are no breaking changes specific to SFUI library itself. To upgrade, please [follow official React guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).

_templates/component/new/react_component.ejs.t

@@ -2,11 +2,12 @@
 to: packages/sfui/frameworks/react/components/<%= name %>/<%= name %>.tsx
 force: false
 ---
+import React from 'react';
 <% Props = name + 'Props' %>import type { <%= Props %> } from './types';
 
 export default function <%= name %>({
   ...attributes
-}: <%= Props %>): JSX.Element {
+}: <%= Props %>): React.JSX.Element {
   return (
 
   );

apps/preview/next/components/utils/Controls.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import { SfButton, SfButtonVariant, SfButtonSize, SfIconExpandLess, SfIconExpandMore } from '@storefront-ui/react';
 import { useControlsSearchParams } from '../../composables/utils/useControlsSearchParams';
 import { ControlOptionBind, ControlsProps, ControlsType } from './types';
@@ -100,7 +100,7 @@ export default function Controls<T extends { [k: string]: any }>({ controls, sta
                   <span id={control.modelName}>{control.modelName}</span>
                 </td>
                 <td className="value">
-                  {((): JSX.Element | JSX.Element[] => {
+                  {((): React.JSX.Element | React.JSX.Element[] => {
                     switch (control.type) {
                       case 'select':
                         return (

apps/preview/next/pages/showcases/Gallery/GalleryVertical.tsx

@@ -3,7 +3,7 @@
 import { ShowcasePageLayout } from '../../showcases';
 
 // #region source
-import { useRef, useState } from 'react';
+import { type RefObject, useRef, useState } from 'react';
 import { useIntersection } from 'react-use';
 import {
   SfScrollable,
@@ -36,13 +36,13 @@ export default function GalleryVertical() {
   const firstThumbRef = useRef<HTMLButtonElement>(null);
   const [activeIndex, setActiveIndex] = useState(0);
 
-  const firstThumbVisible = useIntersection(firstThumbRef, {
+  const firstThumbVisible = useIntersection(firstThumbRef as RefObject<HTMLElement>, {
     root: thumbsRef.current,
     rootMargin: '0px',
     threshold: 1,
   });
 
-  const lastThumbVisible = useIntersection(lastThumbRef, {
+  const lastThumbVisible = useIntersection(lastThumbRef as RefObject<HTMLElement>, {
     root: thumbsRef.current,
     rootMargin: '0px',
     threshold: 1,

apps/preview/next/pages/showcases/MegaMenu/MegaMenuNavigation.tsx

@@ -392,7 +392,7 @@ export default function MegaMenuNavigation() {
   const [inputValue, setInputValue] = useState('');
 
   const refsByKey = useMemo(() => {
-    const buttonRefs: Record<string, RefObject<HTMLButtonElement>> = {};
+    const buttonRefs: Record<string, RefObject<HTMLButtonElement | null>> = {};
     content.children?.forEach((item) => {
       buttonRefs[item.key] = createRef();
     });

apps/preview/next/pages/showcases/Search/SearchWithButton.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-console */
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
-import { type ChangeEvent, type FormEvent, type KeyboardEvent, useState, useRef } from 'react';
+import React, { type ChangeEvent, type FormEvent, type KeyboardEvent, useState, useRef } from 'react';
 import { useDebounce } from 'react-use';
 import { offset } from '@floating-ui/react-dom';
 import {
@@ -21,7 +21,7 @@ import {
 interface Product {
   id: string;
   name: string;
-  thumbnail?: JSX.Element;
+  thumbnail?: React.JSX.Element;
   image?: string;
 }
 

packages/sfui/frameworks/react/components/SfBadge/SfBadge.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SfBadgePlacement } from '@storefront-ui/shared';
 import { twMerge, type SfBadgeProps } from '@storefront-ui/react';
 
@@ -8,7 +9,7 @@ export default function SfBadge({
   placement = SfBadgePlacement['top-right'],
   className,
   ...attributes
-}: SfBadgeProps): JSX.Element {
+}: SfBadgeProps): React.JSX.Element {
   const isDot = variant === 'dot';
   let displayValue = content;
   if (isDot) {

packages/sfui/frameworks/react/components/SfCheckbox/SfCheckbox.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import {
   mergeRefs,
   SfIconCheckBox,
@@ -15,7 +15,7 @@ const SfCheckbox = polymorphicForwardRef<'input', SfCheckboxProps>(
   (
     { wrapperAs, invalid, className, indeterminate: indeterminateProp, wrapperClassName, ...attributes },
     ref,
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     const inputRef = useRef<HTMLInputElement>(null);
     const WrapperTag = wrapperAs || defaultWrapperTag;
     const [isIndeterminate, setIsIndeterminate] = useState(indeterminateProp || false);

packages/sfui/frameworks/react/components/SfCounter/SfCounter.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { SfCounterProps } from '@storefront-ui/react';
 import { SfCounterSize, twMerge } from '@storefront-ui/react';
 
@@ -7,7 +8,7 @@ export default function SfCounter({
   children,
   className,
   ...attributes
-}: SfCounterProps): JSX.Element {
+}: SfCounterProps): React.JSX.Element {
   const sizeClasses: Record<SfCounterSize, string> = {
     [SfCounterSize['3xs']]: twMerge('text-3xs', { 'px-1': pill }),
     [SfCounterSize['2xs']]: twMerge('text-2xs', { 'px-1.5': pill }),

packages/sfui/frameworks/react/components/SfLoaderCircular/SfLoaderCircular.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SfLoaderSize, twMerge } from '@storefront-ui/react';
 import type { SfLoaderCircularProps } from '@storefront-ui/react';
 
@@ -29,7 +30,7 @@ export default function SfLoaderCircular({
   className,
   circleClassName,
   ...attributes
-}: SfLoaderCircularProps): JSX.Element {
+}: SfLoaderCircularProps): React.JSX.Element {
   return (
     <svg
       className={twMerge(