vuestorefront · Szymon-dziewonski · Jan 13, 2026 · Oct 30, 2025 · Oct 30, 2025 · Oct 30, 2025
@@ -0,0 +1,16 @@
+# Open a PR
+
+- Check that I'm in a branch other than `main`, `staging` or `dev`. If not, bail and explain.
+- DO NOT create a new branch, use existing one
+- Check the diff between my branch and the base branch (usually `dev`)
+- If there's unstaged or staged work that hasn't been commited, commit all the relevant code first
+(Use `gh` in case it's installed)
+- Write up a quick PR description in the following format
+<TLDR> (no more than 2 sentences)
+
+<Description>
+- 1~3 bullet points explaining what's changing
+
+- Always use semantic convention as github title. For instance `docs(AT-737): multiple cms-es guide`, `feat(AT-712): add typedApiClient`. Ticket number should be present in the branch name, if not - skip it
+- Always paste the link to the PR in your response so I can click it easily
+- Prepend GIT_EDITOR=true to all git commands you run, so you can avoid getting blocked as you execute commands
@@ -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 (
 
   );

@@ -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 (

@@ -17,8 +17,8 @@
     "classnames": "^2.5.1",
     "lodash-es": "^4.17.21",
     "next": "^14.2.32",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-transition-group": "^4.4.5",
     "react-use": "^17.5.1",
     "swr": "^2.2.5"
@@ -36,8 +36,8 @@
     "@tailwindcss/typography": "^0.5.19",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-transition-group": "^4.4.5",
     "glob-promise": "^6.0.7",
     "prettier": "^3.0.0",

@@ -22,8 +22,8 @@ const options = [
 export default function DrawerWithTransition() {
   const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<`${SfDrawerPlacement}`>('left');
-  const nodeRef = useRef(null);
-  const drawerRef = useRef(null);
+  const nodeRef = useRef<Transition<HTMLElement | undefined>>(null);
+  const drawerRef = useRef<HTMLElement>(null);
 
   useTrapFocus(drawerRef, { activeState: open });
 

@@ -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,

@@ -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();
     });

@@ -23,7 +23,7 @@ const products = Array.from(Array(10), (_, i) => ({
   },
 }));
 
-function ButtonPrev({ disabled, ...attributes }: { disabled?: boolean }) {
+function ButtonPrev({ disabled = false, ...attributes }: { disabled?: boolean }) {
   return (
     <SfButton
       className={classNames('absolute !rounded-full z-10 left-4 bg-white hidden md:block', {
@@ -39,9 +39,7 @@ function ButtonPrev({ disabled, ...attributes }: { disabled?: boolean }) {
   );
 }
 
-ButtonPrev.defaultProps = { disabled: false };
-
-function ButtonNext({ disabled, ...attributes }: { disabled?: boolean }) {
+function ButtonNext({ disabled = false, ...attributes }: { disabled?: boolean }) {
   return (
     <SfButton
       className={classNames('absolute !rounded-full z-10 right-4 bg-white hidden md:block', {
@@ -57,8 +55,6 @@ function ButtonNext({ disabled, ...attributes }: { disabled?: boolean }) {
   );
 }
 
-ButtonNext.defaultProps = { disabled: false };
-
 export default function ProductSliderBasic() {
   return (
     <SfScrollable

@@ -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;
 }
 

@@ -21,8 +21,8 @@
     "test:ci:react": "yarn test:ci && CYPRESS_COVERAGE=true yarn cypress run --component && yarn generate-coverage"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "3.13.4",
@@ -37,8 +37,8 @@
     "@storefront-ui/typography": "workspace:*",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/typography": "^0.5.19",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "chokidar-cli": "^3.0.0",

@@ -1,5 +1,27 @@
 # @storefront-ui/react
 
+## 4.0.0
+
+### Major Changes
+
+- [#3316](https://github.com/vuestorefront/storefront-ui/pull/3316) [`939a982`](https://github.com/vuestorefront/storefront-ui/commit/939a9821c0cfd69d876994182b2442aa2cf7f4d6) Thanks [@FRSgit](https://github.com/FRSgit)! - - **[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).
+
+### Patch Changes
+
+- [#3350](https://github.com/vuestorefront/storefront-ui/pull/3350) [`aa2054d`](https://github.com/vuestorefront/storefront-ui/commit/aa2054da417f3d82601d35846511a3b36997c5f6) Thanks [@Szymon-dziewonski](https://github.com/Szymon-dziewonski)! - [UPDATED] add better data-testid handling to sfCheckbox
+
+## 4.0.0-rc.1
+
+### Patch Changes
+
+- [#3350](https://github.com/vuestorefront/storefront-ui/pull/3350) [`aa2054d`](https://github.com/vuestorefront/storefront-ui/commit/aa2054da417f3d82601d35846511a3b36997c5f6) Thanks [@Szymon-dziewonski](https://github.com/Szymon-dziewonski)! - [UPDATED] add better data-testid handling to sfCheckbox
+
+## 4.0.0-rc.0
+
+### Major Changes
+
+- [#3316](https://github.com/vuestorefront/storefront-ui/pull/3316) [`939a982`](https://github.com/vuestorefront/storefront-ui/commit/939a9821c0cfd69d876994182b2442aa2cf7f4d6) Thanks [@FRSgit](https://github.com/FRSgit)! - - **[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).
+
 ## 3.1.0
 
 ### Minor Changes

@@ -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) {

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import {
   mergeRefs,
   SfIconCheckBox,
@@ -13,9 +13,9 @@ const defaultWrapperTag = 'label';
 
 const SfCheckbox = polymorphicForwardRef<'input', SfCheckboxProps>(
   (
-    { wrapperAs, invalid, className, indeterminate: indeterminateProp, wrapperClassName, ...attributes },
+    { wrapperAs, invalid, className, indeterminate: indeterminateProp, wrapperClassName, 'data-testid': dataTestId, ...attributes },
     ref,
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     const inputRef = useRef<HTMLInputElement>(null);
     const WrapperTag = wrapperAs || defaultWrapperTag;
     const [isIndeterminate, setIsIndeterminate] = useState(indeterminateProp || false);
@@ -47,7 +47,7 @@ const SfCheckbox = polymorphicForwardRef<'input', SfCheckboxProps>(
           },
           wrapperClassName,
         )}
-        data-testid="checkbox"
+        data-testid={dataTestId ?? "checkbox"}
       >
         <input
           className={twMerge('sr-only', className)}

@@ -5,5 +5,6 @@ export interface SfCheckboxProps extends PropsWithStyle, InputHTMLAttributes<HTM
   invalid?: boolean;
   wrapperAs?: ElementType<any> | undefined;
   wrapperClassName?: string;
+  'data-testid'?: string;
   indeterminate?: boolean;
 }
@@ -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 }),

@@ -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(

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SfLoaderLinearSize, SfLoaderSize, twMerge } from '@storefront-ui/react';
 import type { SfLoaderLinearProps } from '@storefront-ui/react';
 
@@ -18,7 +19,7 @@ export default function SfLoaderLinear({
   ariaLabel = 'loading',
   className,
   ...attributes
-}: SfLoaderLinearProps): JSX.Element {
+}: SfLoaderLinearProps): React.JSX.Element {
   return (
     <span
       className={twMerge(

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SfProgressSize, twMerge } from '@storefront-ui/react';
 import type { SfProgressCircularProps } from '@storefront-ui/react';
 
@@ -31,7 +32,7 @@ export default function SfProgressCircular({
   className,
   circleClassName,
   ...attributes
-}: SfProgressCircularProps): JSX.Element {
+}: SfProgressCircularProps): React.JSX.Element {
   const strokeDasharray = `${(value / 100) * 151}, 150`;
   return (
     <svg

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SfProgressSize, SfProgressLinearSize, twMerge } from '@storefront-ui/react';
 import type { SfProgressLinearProps } from '@storefront-ui/react';
 
@@ -19,7 +20,7 @@ export default function SfProgressLinear({
   ariaLabel = 'Progress element',
   className,
   ...attributes
-}: SfProgressLinearProps): JSX.Element {
+}: SfProgressLinearProps): React.JSX.Element {
   return (
     <progress
       data-testid="progress-linear"

@@ -1,5 +1,5 @@
 'use client';
-import { useState, type ChangeEvent } from 'react';
+import React, { useState, type ChangeEvent } from 'react';
 import classnames from 'classnames';
 import {
   SfIconStar,
@@ -50,7 +50,7 @@ export default function SfRatingButton({
   getLabelText = defaultLabelText,
   children = renderDefaultIcon,
   ...attributes
-}: SfRatingButtonProps): JSX.Element {
+}: SfRatingButtonProps): React.JSX.Element {
   const [hoverValue, setHoverValue] = useState(0);
   const icons = Array.from({ length: Math.floor(Math.abs(max)) }, (_, index) => index + 1);
   const isIconFilled = (ratingValue: number) => ratingValue <= hoverValue || (hoverValue === 0 && ratingValue <= value);

@@ -1,8 +1,8 @@
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { twMerge, type SfSwitchProps } from '@storefront-ui/react';
 
 const SfSwitch = forwardRef<HTMLInputElement, SfSwitchProps>(
-  ({ invalid, className, ...attributes }, ref): JSX.Element => (
+  ({ invalid, className, ...attributes }, ref): React.JSX.Element => (
     <input
       ref={ref}
       className={twMerge(

@@ -1,6 +1,6 @@
 'use client';
 import { SfTextareaSize, twMerge, useFocusVisible } from '@storefront-ui/react';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import type { SfTextareaProps } from './types';
 
 const sizeClasses = {
@@ -10,7 +10,7 @@ const sizeClasses = {
 };
 
 export default forwardRef<HTMLTextAreaElement, SfTextareaProps>(
-  ({ size = SfTextareaSize.base, invalid = false, className, ...attributes }, ref): JSX.Element => {
+  ({ size = SfTextareaSize.base, invalid = false, className, ...attributes }, ref): React.JSX.Element => {
     const { isFocusVisible } = useFocusVisible({ isTextInput: true });
 
     return (

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SfThumbnailProps, SfThumbnailSize, twMerge } from '@storefront-ui/react';
 
 const sizeClasses = {
@@ -12,7 +13,7 @@ export default function SfThumbnail({
   children,
   className,
   ...attributes
-}: SfThumbnailProps): JSX.Element {
+}: SfThumbnailProps): React.JSX.Element {
   return (
     <div
       className={twMerge('rounded-full overflow-hidden bg-clip-content p-0.5', sizeClasses[size], className)}