Merge pull request #3379 from vuestorefront/v2-release/3.3.0

chore: release 3.3.0

Author: FRSgit

.changeset/config.json

@@ -11,7 +11,6 @@
     "@storefront-ui/preview-next",
     "@storefront-ui/preview-nuxt",
     "@storefront-ui/preview-shared",
-    "@storefront-ui/docs",
     "@storefront-ui/example-style",
     "@storefront-ui/tests",
     "@storefront-ui/vue-test",

.changeset/nuxt4-support.md

@@ -0,0 +1,5 @@
+---
+"@storefront-ui/nuxt": minor
+---
+
+Add Nuxt 4 support while maintaining backward compatibility with Nuxt 3

.github/workflows/ci.yml

@@ -155,7 +155,7 @@ jobs:
         run: cd apps/test/vue; yarn generate-coverage
       - name: SonarCloud Scan
         if: ${{ env.SONAR_TOKEN_VUE }}
-        uses: SonarSource/sonarqube-scan-action@v5
+        uses: SonarSource/sonarqube-scan-action@v6
         with:
           projectBaseDir: packages/sfui/frameworks/vue
         env:
@@ -190,7 +190,7 @@ jobs:
         run: cd apps/test/react; yarn generate-coverage
       - name: SonarCloud Scan
         if: ${{ env.SONAR_TOKEN_REACT }}
-        uses: SonarSource/sonarqube-scan-action@v5
+        uses: SonarSource/sonarqube-scan-action@v6
         with:
           projectBaseDir: packages/sfui/frameworks/react
         env:

.nvmrc

@@ -1 +1 @@
-20.11.1
+22.14.0

.yarn/plugins/plugin-install-docs-deps.js

@@ -0,0 +1,23 @@
+const { execSync } = require('node:child_process');
+const { resolve, join } = require('node:path');
+
+const pluginName = 'plugin-install-docs-deps';
+const projectRoot = resolve(__dirname, '..', '..');
+
+module.exports = {
+  name: pluginName,
+  factory: () => ({
+    hooks: {
+      afterAllInstalled(_, context) {
+        if (context?.report?.configuration?.projectCwd === projectRoot) {
+          try {
+            execSync('yarn install', { cwd: join(projectRoot, 'apps', 'docs', 'components'), stdio: 'inherit' });
+          } catch (error) {
+            console.error('Failed to run yarn install in apps/docs/components:', error);
+            process.exit(1);
+          }
+        }
+      },
+    },
+  }),
+};

.yarnrc.yml

@@ -3,5 +3,6 @@ nodeLinker: node-modules
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: '@yarnpkg/plugin-workspace-tools'
+  - path: .yarn/plugins/plugin-install-docs-deps.js
 
 yarnPath: .yarn/releases/yarn-3.8.7.cjs

README.md

@@ -62,7 +62,7 @@ In addition, Storefront UI fits perfectly complex UI setups where one library is
 - **Typography** package simplifying usage of 3rd party fonts
 - **Figma** file with pixel-perfect representation of SFUI components based on tailwind properties
 
-<a href="https://www.figma.com/file/Q7Nr1NvjPdcGVhykkfDg2k/Storefront-UI-%7C-Design-Kit-v2.5-(public)?type=design&node-id=22913-91045&mode=design"><img src="./_readme/figma_included.png"></a>
+<a href="https://www.figma.com/design/ZxaUFeSq1XYvR8v8eqTrJU/SFUI-2-%7C-Design-Kit-v2.7--public-?node-id=22913-91045&p=f&t=Y3eoI5dyw6cRAzVk-0"><img src="./_readme/figma_included.png"></a>
 
 ## Contributing
 

apps/docs/components/.gitignore

@@ -0,0 +1,7 @@
+# Yarn
+.yarn/*
+*/.yarn
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks

…/sf-docs-base-npm-1.3.2-2dba5f0f27.patch …/sf-docs-base-npm-1.3.2-2dba5f0f27.patch.yarn/patches/sf-docs-base-npm-1.3.2-2dba5f0f27.patch renamed to apps/docs/components/.yarn/patches/sf-docs-base-npm-1.3.2-2dba5f0f27.patch .yarn/patches/sf-docs-base-npm-1.3.2-2dba5f0f27.patch renamed to apps/docs/components/.yarn/patches/sf-docs-base-npm-1.3.2-2dba5f0f27.patch

@@ -165,8 +165,12 @@ function CustomPagination() {
 <script lang="ts" setup>
 import { usePagination, SfIconChevronRight, SfIconChevronLeft, SfButton } from '@storefront-ui/vue';
 
+const totalItems = ref(150);
+
 const { totalPages, pages, selectedPage, startPage, endPage, next, prev, setPage, maxVisiblePages } = usePagination({
-  totalItems: 150
+  totalItems,
+  // initially shown page
+  currentPage: 2,
 });
 </script>
 
@@ -299,10 +303,18 @@ Listed parameters should be passed as object.
 
 | Name        | Type                  | Default value | Description                                  |
 | ---------   | --------------------- | ------------- | -------------------------------------------  |
+::react-only
 | totalItems\*  | `number`            |               | total number of items to be be displayed    |
 | currentPage   | `number`            |  `1`          | current active page                       |
 | pageSize      | `number`            |  `10`         | number of items per page                  |
-| maxPages      | `number`            |  `1`          | maximum number of pages to display**       |
+| maxPages      | `number`            |  `1`          | maximum number of page links to display**       |
+::
+::vue-only
+| totalItems\*  | `MaybeRefOrGetter<number>`            |               | total number of items to be be displayed    |
+| currentPage   | `MaybeRefOrGetter<number>`            |  `1`          | current active page                       |
+| pageSize      | `MaybeRefOrGetter<number>`            |  `10`         | number of items per page                  |
+| maxPages      | `MaybeRefOrGetter<number>`            |  `1`          | maximum number of page links to display**       |
+::
 
 There is an additional page displayed when the default number (`1`) is passed. When the current number is `1` then page `2` and the last pages are visible. When the penultimate page is the current one then pages `1` and the last one are visible.
 
@@ -312,8 +324,8 @@ There is an additional page displayed when the default number (`1`) is passed. W
 | Name            | Type              | Default value | Description                                        |
 | ---------        | --------------   | ------------- | -------------------------------------------        |
 | totalPages       | `number`           |               | total number of pages                              |
-| maxVisiblePages  | `number`           |               | total number of pages                              |
-| itemsPerPage     | `number`           |               | total number of pages                              |
+| maxVisiblePages  | `number`           |               | maximum number of visible pages                              |
+| itemsPerPage     | `number`           |               | total number of items per page                              |
 | pages            | `number[]`         |               | array of displayed pages                           |
 | selectedPage     | `number`           |               | current page                                       |
 | endPage          | `number`           |               | number of the last page from displayed pages       |