Merge pull request #3212 from vuestorefront/v2

github-actions[bot] · web-flow · commit 2be97c8a0852 · 2024-07-22T21:36:02.000+02:00
chore: automatic sync v2-&gt;v2-develop
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
     "rimraf": "^5.0.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "tailwindcss": "^3.4.3",
     "turbo": "latest",
     "typescript": "^5.4.5",
@@ -81,7 +82,7 @@
   "engines": {
     "npm": ">=8.19.1",
     "yarn": ">=1.22.19",
-    "node": ">=16.0.0 <17.0.0"
+    "node": ">=16.0.0"
   },
   "packageManager": "yarn@3.8.2",
   "config": {
diff --git a/packages/sfui/frameworks/react/CHANGELOG.md b/packages/sfui/frameworks/react/CHANGELOG.md
@@ -1,5 +1,45 @@
 # @storefront-ui/react
 
+## 2.7.0
+
+### Minor Changes
+
+- [#3148](https://github.com/vuestorefront/storefront-ui/pull/3148) [`34b7107`](https://github.com/vuestorefront/storefront-ui/commit/34b7107053521733301a719822383ea056a96f4c) Thanks [@Razz21](https://github.com/Razz21)! - [CHANGED] Implemented `use client` directive in components:
+  - `SfAccordionItem`
+  - `SfDrawer`
+  - `SfDropdown`
+  - `SfModal`
+  - `SfRatingButton`
+  - `SfScrollable`
+  - `SfSelect`
+  - `SfTextarea`
+  - `SfTooltip`
+
+### Patch Changes
+
+- [#3157](https://github.com/vuestorefront/storefront-ui/pull/3157) [`a9cd099`](https://github.com/vuestorefront/storefront-ui/commit/a9cd09921c29decf8647e486b4ee573cb89d8fe8) Thanks [@Razz21](https://github.com/Razz21)! - [FIXED] Mark SfInput as client component
+
+## 2.7.0-rc.1
+
+### Patch Changes
+
+- [#3157](https://github.com/vuestorefront/storefront-ui/pull/3157) [`a9cd099`](https://github.com/vuestorefront/storefront-ui/commit/a9cd09921c29decf8647e486b4ee573cb89d8fe8) Thanks [@Razz21](https://github.com/Razz21)! - [FIXED] Mark SfInput as client component
+
+## 2.7.0-rc.0
+
+### Minor Changes
+
+- [#3148](https://github.com/vuestorefront/storefront-ui/pull/3148) [`34b7107`](https://github.com/vuestorefront/storefront-ui/commit/34b7107053521733301a719822383ea056a96f4c) Thanks [@Razz21](https://github.com/Razz21)! - [CHANGED] Implemented `use client` directive in components:
+  - `SfAccordionItem`
+  - `SfDrawer`
+  - `SfDropdown`
+  - `SfModal`
+  - `SfRatingButton`
+  - `SfScrollable`
+  - `SfSelect`
+  - `SfTextarea`
+  - `SfTooltip`
+
 ## 2.6.4
 
 ### Patch Changes
diff --git a/packages/sfui/frameworks/react/components/SfAccordionItem/SfAccordionItem.tsx b/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';
diff --git a/packages/sfui/frameworks/react/components/SfDrawer/SfDrawer.tsx b/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';
diff --git a/packages/sfui/frameworks/react/components/SfDropdown/SfDropdown.tsx b/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';
diff --git a/packages/sfui/frameworks/react/components/SfInput/SfInput.tsx b/packages/sfui/frameworks/react/components/SfInput/SfInput.tsx
@@ -1,3 +1,4 @@
+'use client';
 import classNames from 'classnames';
 import { SfInputSize, useFocusVisible, type SfInputProps, polymorphicForwardRef } from '@storefront-ui/react';
 
diff --git a/packages/sfui/frameworks/react/components/SfModal/SfModal.tsx b/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';
diff --git a/packages/sfui/frameworks/react/components/SfRatingButton/SfRatingButton.tsx b/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 {
diff --git a/packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx b/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';
diff --git a/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx b/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';
diff --git a/packages/sfui/frameworks/react/components/SfTextarea/SfTextarea.tsx b/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';
diff --git a/packages/sfui/frameworks/react/components/SfTooltip/SfTooltip.tsx b/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';
 
diff --git a/packages/sfui/frameworks/react/package.json b/packages/sfui/frameworks/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storefront-ui/react",
-  "version": "2.6.4",
+  "version": "2.7.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
diff --git a/packages/sfui/frameworks/react/vite.config.ts b/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,12 @@ 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);
+      },
     },
   },
 });
diff --git a/yarn.lock b/yarn.lock
@@ -4711,6 +4711,7 @@ __metadata:
     remark-parse: ^11.0.0
     remark-stringify: ^11.0.0
     rimraf: ^5.0.0
+    rollup-plugin-preserve-directives: ^0.4.0
     tailwindcss: ^3.4.3
     turbo: latest
     typescript: ^5.4.5
@@ -20080,6 +20081,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"

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+'use client';`
`1`	`2`	`import { forwardRef } from 'react';`
`2`	`3`	`import type { MouseEvent } from 'react';`
`3`	`4`	`import classNames from 'classnames';`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+'use client';`
`1`	`2`	`import { useState, type ChangeEvent } from 'react';`
`2`	`3`	`import classnames from 'classnames';`
`3`	`4`	`import {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+'use client';`
`1`	`2`	`/* eslint-disable react/require-default-props */`
`2`	`3`	`import { cloneElement, useMemo } from 'react';`
`3`	`4`	`import classNames from 'classnames';`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+'use client';`
`1`	`2`	`import { KeyboardEvent, useState } from 'react';`
`2`	`3`	`import classNames from 'classnames';`
`3`	`4`	`import { SfSelectSize, SfIconExpandMore, composeHandlers, useFocusVisible } from '@storefront-ui/react';`