feat: enable react client components

package.json

@@ -70,6 +70,7 @@
     "hygen": "^6.2.8",
     "prettier": "latest",
     "rimraf": "^5.0.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "tailwindcss": "^3.4.3",
     "turbo": "latest",
     "typescript": "^5.4.5",

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

@@ -1,3 +1,4 @@
+'use client';
 import { forwardRef } from 'react';
 import type { MouseEvent } from 'react';
 import classNames from 'classnames';

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

@@ -1,3 +1,4 @@
+'use client';
 import classNames from 'classnames';
 import { useRef } from 'react';
 import { useClickAway } from 'react-use';

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

@@ -1,3 +1,4 @@
+'use client';
 import classNames from 'classnames';
 import { useDropdown } from '@storefront-ui/react';
 import type { SfDropdownProps } from '@storefront-ui/react';

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

@@ -1,3 +1,4 @@
+'use client';
 import classNames from 'classnames';
 import { useRef } from 'react';
 import { useClickAway } from 'react-use';

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

@@ -1,3 +1,4 @@
+'use client';
 import { useState, type ChangeEvent } from 'react';
 import classnames from 'classnames';
 import {

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

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable react/require-default-props */
 import { cloneElement, useMemo } from 'react';
 import classNames from 'classnames';

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

@@ -1,3 +1,4 @@
+'use client';
 import { KeyboardEvent, useState } from 'react';
 import classNames from 'classnames';
 import { SfSelectSize, SfIconExpandMore, composeHandlers, useFocusVisible } from '@storefront-ui/react';

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

@@ -1,3 +1,4 @@
+'use client';
 import classNames from 'classnames';
 import { SfTextareaSize, useFocusVisible } from '@storefront-ui/react';
 import { forwardRef } from 'react';

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

@@ -1,3 +1,4 @@
+'use client';
 import { useTooltip } from '@storefront-ui/react';
 import type { SfTooltipProps } from '@storefront-ui/react';
 

packages/sfui/frameworks/react/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
-
+import preserveDirectives from 'rollup-plugin-preserve-directives';
 import pkg from './package.json';
 
 export default defineConfig({
@@ -36,6 +36,14 @@ export default defineConfig({
         preserveModules: true,
         preserveModulesRoot: './',
       },
+      plugins: [preserveDirectives()],
+      onwarn(warning, warn) {
+        // https://github.com/vitejs/vite-plugin-react/issues/137
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+          return;
+        }
+        warn(warning);
+      },
     },
   },
 });

yarn.lock

@@ -4521,6 +4521,7 @@ __metadata:
     hygen: ^6.2.8
     prettier: latest
     rimraf: ^5.0.0
+    rollup-plugin-preserve-directives: ^0.4.0
     tailwindcss: ^3.4.3
     turbo: latest
     typescript: ^5.4.5
@@ -21693,6 +21694,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup-plugin-preserve-directives@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "rollup-plugin-preserve-directives@npm:0.4.0"
+  dependencies:
+    "@rollup/pluginutils": ^5.1.0
+    magic-string: ^0.30.5
+  peerDependencies:
+    rollup: 2.x || 3.x || 4.x
+  checksum: 457ca1f60d2cdbe5485339dbc4b228bec5684a99b6589c771bc2268ffaeb29dce2d248f83a85da2fbf572a23cc592d7f59e6485369965210df1035f22ce67feb
+  languageName: node
+  linkType: hard
+
 "rollup-plugin-visualizer@npm:^5.12.0":
   version: 5.12.0
   resolution: "rollup-plugin-visualizer@npm:5.12.0"