refactor: move packages to shopware org (#1602)

* refactor: move packages from shopware-pwa to shopware npm organisation

* refactor: switch cms-base package

* refactor: migrate nuxt module

* chore: adjust messages

.changeset/chilled-seas-juggle.md

@@ -0,0 +1,5 @@
+---
+"@shopware/nuxt-module": minor
+---
+
+Package `@shopware-pwa/nuxt3-module` is deprecated. Use [@shopware/nuxt-module](https://www.npmjs.com/package/@shopware/nuxt-module) instead.

.changeset/kind-toys-boil.md

@@ -0,0 +1,11 @@
+---
+"vue-demo-store": minor
+"@shopware/cms-base-layer": minor
+"@shopware/nuxt-module": minor
+"@shopware/composables": minor
+"vue-blank": minor
+"@shopware/helpers": minor
+"docs": minor
+---
+
+Switch from `@shopware-pwa/helpers-next` to `@shopware/helpers` package.

.changeset/serious-wombats-count.md

@@ -0,0 +1,11 @@
+---
+"vue-demo-store": minor
+"@shopware/cms-base-layer": minor
+"@shopware/nuxt-module": minor
+"@shopware/composables": minor
+"vue-blank": minor
+"@shopware/helpers": minor
+"docs": minor
+---
+
+Switch from `@shopware-pwa/cms-base` to `@shopware/cms-base-layer` package.

.github/workflows/code-check.yml

@@ -80,7 +80,7 @@ jobs:
         run: pnpm lint
 
       - name: Publish package previews
-        run: npx pkg-pr-new publish './packages/api-client' './packages/api-gen' './packages/cms-base' './packages/composables' './packages/helpers' './packages/nuxt3-module'
+        run: npx pkg-pr-new publish './packages/api-client' './packages/api-gen' './packages/cms-base-layer' './packages/composables' './packages/helpers' './packages/nuxt-module'
 
   test:
     name: Test

apps/docs/.vitepress/config.hub.ts

@@ -31,7 +31,7 @@ export default (
       ReadmeBasedReference({ projectRootDir, relativeDir: "packages" }),
       CmsBaseReference({
         projectRootDir,
-        relativeDir: "packages/cms-base/components/public/cms",
+        relativeDir: "packages/cms-base-layer/components/public/cms",
       }),
       ReadmeLoader(),
       ComposablesBuilder({

apps/docs/.vitepress/sidebar.ts

@@ -341,8 +341,8 @@ export const sidebar = [
         collapsed: true,
         items: composables?.composablesList ?? [],
       },
-      { text: "CMS Base", link: "/packages/cms-base.html" },
-      { text: "Nuxt3 Module", link: "/packages/nuxt3-module.html" },
+      { text: "CMS Base", link: "/packages/cms-base-layer.html" },
+      { text: "Nuxt3 Module", link: "/packages/nuxt-module.html" },
       { text: "Helpers", link: "/packages/helpers.html" },
     ],
   },

apps/docs/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@shopware/composables": "workspace:*",
-    "@shopware-pwa/helpers-next": "workspace:*",
+    "@shopware/helpers": "workspace:*",
     "@shopware/api-client": "workspace:*",
     "flexsearch": "0.7.43",
     "markdown-it": "14.1.0",

apps/docs/src/framework/internal-structure.md

@@ -38,7 +38,7 @@ The API client provides a common interface to access the Shopware API. It can be
 ## helpers
 
 <div class="flex mt--4 mb-4 gap-2">
-    <img src="../.assets/framework-icons/typescript.png" alt="This package depends on Typescript" title="This package depends on Typescript" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" /> | <a href="https://www.npmjs.com/package/@shopware-pwa/helpers-next" target="_blank">@shopware-pwa/helpers-next</a>
+    <img src="../.assets/framework-icons/typescript.png" alt="This package depends on Typescript" title="This package depends on Typescript" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" /> | <a href="https://www.npmjs.com/package/@shopware/helpers" target="_blank">@shopware/helpers</a>
 </div>
 
 Helpers are functions that can be used for formatting, data manipulation and other stateless tasks within any JavaScript project. They are not tied to any other components.
@@ -56,27 +56,27 @@ The composables are a set of Vue.js composition functions that can be used in an
 
 <PageRef page="../packages/composables.html" title="Composables Reference" sub="Package API reference with all composables" />
 
-## nuxt3-module
+## nuxt-module
 
 <div class="flex mt--4 mb-4 gap-2">
     <img src="../.assets/framework-icons/typescript.png" alt="This package depends on Typescript" title="This package depends on Typescript" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" />
     <img src="../.assets/framework-icons/vue.png" alt="This package depends on Vue.js 3" title="This package depends on Vue.js 3" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" />
-    <img src="../.assets/framework-icons/nuxt.png" alt="This package depends on Nuxt 3" title="This package depends on Nuxt 3" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" /> | <a href="https://www.npmjs.com/package/@shopware-pwa/nuxt3-module" target="_blank">@shopware-pwa/nuxt3-module</a>
+    <img src="../.assets/framework-icons/nuxt.png" alt="This package depends on Nuxt 3" title="This package depends on Nuxt 3" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" /> | <a href="https://www.npmjs.com/package/@shopware/nuxt-module" target="_blank">@shopware/nuxt-module</a>
 </div>
 
 The Nuxt 3 module allows you to set up a Nuxt 3 project with Shopware Frontends. It provides the [composables](#composables) and [api-client](#api-client) packages.
 
 If you want to use these packages with a different Vue.js framework, see the guide for using Shopware Frontends in a [custom project](/getting-started/templates/custom-vue-project.html).
 
-<PageRef page="../packages/nuxt3-module.html" title="Nuxt3 Module Reference" sub="Documentation about setup and basic usage" />
+<PageRef page="../packages/nuxt-module.html" title="Nuxt3 Module Reference" sub="Documentation about setup and basic usage" />
 
 ## cms-base
 
 <div class="flex mt--4 mb-4 gap-2">
     <img src="../.assets/framework-icons/typescript.png" alt="This package depends on Typescript" title="This package depends on Typescript" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" />
     <img src="../.assets/framework-icons/vue.png" alt="This package depends on Vue.js 3" title="This package depends on Vue.js 3" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" />
     <img src="../.assets/framework-icons/nuxt.png" alt="This package depends on Nuxt 3" title="This package depends on Nuxt 3" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" />
-    <img src="../.assets/framework-icons/tailwind.png" alt="This package depends on UnoCSS / Tailwind.css" title="This package depends on UnoCSS / Tailwind.css" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" /> | <a href="https://www.npmjs.com/package/@shopware-pwa/cms-base" target="_blank">@shopware-pwa/cms-base</a>
+    <img src="../.assets/framework-icons/tailwind.png" alt="This package depends on UnoCSS / Tailwind.css" title="This package depends on UnoCSS / Tailwind.css" class="w-6 aspect-square hover:scale-125 transition hover:drop-shadow-md" /> | <a href="https://www.npmjs.com/package/@shopware/cms-base-layer" target="_blank">@shopware/cms-base-layer</a>
 </div>
 
 The CMS base is a Nuxt module that provides an implementation of all CMS components in Shopware [based on utility-classes](./styling.html) using unocss/Tailwind.css syntax. It is useful for projects that want to use the CMS components but design their own layout.

apps/docs/src/framework/shopping-experiences.md

@@ -25,12 +25,12 @@ If your project is based on the [Demo Store Template](/getting-started/templates
 
 ## Install the package
 
-The `@shopware-pwa/cms-base` package provides an implementation of all default CMS components in Shopware's Shopping Experiences. It uses Tailwind.css syntax for styling. You will now use it to render a content page.
+The `@shopware/cms-base-layer` package provides an implementation of all default CMS components in Shopware's Shopping Experiences. It uses Tailwind.css syntax for styling. You will now use it to render a content page.
 
 First of all, add the package to your project:
 
 ```bash
-npm install -D @shopware-pwa/cms-base
+npm install -D @shopware/cms-base-layer
 ```
 
 Next, you need to register all components in its `components/public` directory globally. How to do it, depends on your environment. However, the package also comes with a nuxt module which does that for you. So in any Nuxt application, you can just add if to the `modules` section of your Nuxt config file:
@@ -40,8 +40,8 @@ Next, you need to register all components in its `components/public` directory g
 
 export default defineNuxtConfig({
   /* ... */
-- modules: [/* ... */, "@shopware-pwa/nuxt3-module"],
-+ modules: [/* ... */, "@shopware-pwa/cms-base"],
+- modules: [/* ... */, "@shopware/nuxt-module"],
++ modules: [/* ... */, "@shopware/cms-base-layer"],
 });
 ```
 

apps/docs/src/framework/styling.md

@@ -145,8 +145,7 @@ Remove the unocss imports, build modules and configuration from the `nuxt.config
    buildModules: [
      "@vueuse/nuxt",
 -    "@unocss/nuxt",
-     "@shopware-pwa/nuxt3-module",
-     "@shopware-pwa/cms-base",
+     "@shopware/nuxt-module"
    ],
    vueuse: {
      ssrHandlers: true,

apps/docs/src/getting-started/cms/content-pages.md

@@ -31,7 +31,7 @@ See [install the package](/framework/shopping-experiences.html#install-the-packa
 
 ### Render the page
 
-Now, you can import all components from the `@shopware-pwa/cms-base` package and use them in your templates. The most straightforward way to render a page is to use the `CmsPage` component. It takes a `content` prop and resolves all subordinate sections, blocks and elements automatically. Put the following code in your catch-all component that also handles the [routing logic](/getting-started/routing.html#resolve-a-route-to-a-page).
+Now, you can import all components from the `@shopware/cms-base-layer` package and use them in your templates. The most straightforward way to render a page is to use the `CmsPage` component. It takes a `content` prop and resolves all subordinate sections, blocks and elements automatically. Put the following code in your catch-all component that also handles the [routing logic](/getting-started/routing.html#resolve-a-route-to-a-page).
 
 ```vue-html
 <CmsPage v-if="data" :content="data.cmsPage"/>

apps/docs/src/getting-started/cms/customize-components.md

@@ -42,7 +42,7 @@ Now the CMS module will automatically resolve that file based on the name and yo
 
 ❗**Internal components are not a part of public API. Once overwritten you need to track the changes on your own.**
 
-There is also a possibility to override the internal components, shared between public blocks and elements, the ones starting with `Sw` prefix, like [SwSlider.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base/components/SwSlider.vue) or [SwProductCard.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base/components/SwProductCard.vue).
+There is also a possibility to override the internal components, shared between public blocks and elements, the ones starting with `Sw` prefix, like [SwSlider.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/components/SwSlider.vue) or [SwProductCard.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/components/SwProductCard.vue).
 
 ### Additional Example
 

apps/docs/src/getting-started/cms/overwriting-cms.md

@@ -21,7 +21,7 @@ More about auto imports can be found [here](https://nuxt.com/docs/guide/concepts
 ## Example how to overwrite the cms block product listing
 
 We have this cms element **component** from **cms-base package**:  
-`packages/cms-base/components/public/cms/block/CmsBlockProductListing.vue`
+`packages/cms-base-layer/components/public/cms/block/CmsBlockProductListing.vue`
 
 If we want to create our own product listing **component** in **demo-store** the correct place would be:
 `templates/vue-demo-store/components/cms/block/CmsBlockProductListing.vue`
@@ -51,5 +51,5 @@ As example: some components use `SwSharedPrice.vue` to show prices with correspo
 
 Generic components are responsible for resolving each CMS element
 
-- [CmsGenericElement.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base/components/public/cms/CmsGenericElement.vue)
-- [CmsGenericBlock.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base/components/public/cms/CmsGenericBlock.vue)
+- [CmsGenericElement.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/components/public/cms/CmsGenericElement.vue)
+- [CmsGenericBlock.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/components/public/cms/CmsGenericBlock.vue)

apps/docs/src/getting-started/e-commerce/product-detail-page.md

@@ -47,7 +47,7 @@ const propertyGroups: Schemas["PropertyGroup"][] = productResponse.configurator;
 Thanks to this, in the response we are able to access `Product` and `configurator` object. The latter is responsible for keeping related variants information to be used for more complex products.
 
 :::info
-If you are using Nuxt.js and a `Product` entity object contains `.cmsPage` property, you can also utilize `@shopware-pwa/cms-base` Nuxt 3 module to display the whole Product page designed in Shopping Experiences.
+If you are using Nuxt.js and a `Product` entity object contains `.cmsPage` property, you can also utilize `@shopware/cms-base-layer` Nuxt 3 module to display the whole Product page designed in Shopping Experiences.
 :::
 
 Having source of the data, you can display all you need in your Vue.js template:

apps/docs/src/getting-started/e-commerce/product-listing.md

@@ -432,7 +432,7 @@ Active filters for `Properties` contain only the list of ID's of properties' opt
 
 ## Helpers package
 
-The purpose of `@shopware-pwa/helpers-next` is to make developer's life easier.
+The purpose of `@shopware/helpers` is to make developer's life easier.
 
 In the present case, we could use the product's thumbnail or use the translated name, or even get the product details page's URL, if the application supports a routing.
 
@@ -442,7 +442,7 @@ import {
   getSmallestThumbnailUrl,
   getProductUrl,
   getTranslatedProperty,
-} from "@shopware-pwa/helpers-next";
+} from "@shopware/helpers";
 ```
 
 ```html

apps/docs/src/getting-started/features/maintenance-mode.md

@@ -20,7 +20,7 @@ You can activate the maintenance mode of your store by selecting your sales chan
 Maintenance mode is returned as an error from all of the endpoints. We can detect it by using `onResponseError` hook.
 
 ```ts
-import { isMaintenanceMode } from "@shopware-pwa/helpers-next";
+import { isMaintenanceMode } from "@shopware/helpers";
 
 const apiClient = createAPIClient({
   baseURL: shopwareEndpoint,
@@ -45,7 +45,7 @@ This example is for Nuxt 3 apps
 Every error thrown within the application is automatically caught and the `error.vue` page is displayed.
 
 ```ts
-import { isMaintenanceMode } from "@shopware-pwa/helpers-next";
+import { isMaintenanceMode } from "@shopware/helpers";
 
 apiClient.hook("onResponseError", (response) => {
   const error = isMaintenanceMode(response._data?.errors ?? []);

apps/docs/src/getting-started/page-elements/breadcrumbs.md

@@ -57,7 +57,7 @@ breadcrumb: ["Home", "Main navigation ", "Summer Party"]
 we can convert current `string` array to the `Breadcrumb` object using [getCategoryBreadcrumbs](/packages/helpers.html#getcategorybreadcrumbs) helper, and then pass it to [useBreadcrumbs](/packages/composables.html#usebreadcrumbs) composable.
 
 ```ts
-import { getCategoryBreadcrumbs } from "@shopware-pwa/helpers-next";
+import { getCategoryBreadcrumbs } from "@shopware/helpers";
 
 let breadcrumbs = getCategoryBreadcrumbs(
   productResponse.value?.product?.seoCategory,

apps/docs/src/getting-started/page-elements/examples/footer-navigation/index.md

@@ -20,7 +20,7 @@ Implementing Footer navigation can be described in few steps:
 ```vue
 <script setup lang="ts">
 import { useNavigation } from "@shopware/composables";
-import { getCategoryRoute } from "@shopware-pwa/helpers-next";
+import { getCategoryRoute } from "@shopware/helpers";
 const { navigationElements, loadNavigationElements } = useNavigation({
   type: "footer-navigation", // footer-navigation selected
 });

apps/docs/src/getting-started/page-elements/examples/listing/index.md

@@ -21,7 +21,7 @@ This listing shows the product name and price with soft hover effects and a fade
 ```vue
 <script setup lang="ts">
 import { useProductSearchSuggest } from "@shopware/composables";
-import { getTranslatedProperty } from "@shopware-pwa/helpers-next";
+import { getTranslatedProperty } from "@shopware/helpers";
 
 const { search, searchTerm, getTotal, getProducts } = useProductSearchSuggest();
 

apps/docs/src/getting-started/page-elements/examples/product-detail-page/index.md

@@ -21,10 +21,7 @@ Path: `templates/vue-demo-store/components/product/ProductStatic.vue`
 ```vue
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
-import {
-  getProductRoute,
-  getTranslatedProperty,
-} from "@shopware-pwa/helpers-next";
+import { getProductRoute, getTranslatedProperty } from "@shopware/helpers";
 import type { Ref } from "vue";
 
 const router = useRouter();

apps/docs/src/getting-started/page-elements/images.md

@@ -112,7 +112,7 @@ There are few functions that could be used to extract some crucial information a
 Example how to work with Product's main image:
 
 ```ts
-import { getMainImageUrl } from "@shopware-pwa/helpers-next";
+import { getMainImageUrl } from "@shopware/helpers";
 
 const coverUrl = getMainImageUrl(product);
 // coverUrl is now an URL to the resource (or undefined)

apps/docs/src/getting-started/page-elements/navigation.md

@@ -42,7 +42,7 @@ Note that all the navigation items are in type `Category`, and thanks to this th
 
 ```vue
 <script setup lang="ts">
-import { getCategoryUrl } from "@shopware-pwa/helpers-next";
+import { getCategoryUrl } from "@shopware/helpers";
 const { loadNavigationElements, navigationElements } = useNavigation();
 await loadNavigationElements({ depth: 2 });
 </script>

apps/docs/src/getting-started/routing.md

@@ -106,7 +106,7 @@ switch (routeName.value) {
 This switch statement handles all options that Shopware natively supports and can easily be enhanced. Another option is to build custom components for each route type and do the rest in there.
 
 :::tip Module imports
-If you use the `@shopware-pwa/nuxt3-module`, all composables will be automatically imported for you.
+If you use the `@shopware/nuxt-module`, all composables will be automatically imported for you.
 :::
 
 You are done at this point if you choose to build/design custom pages or integrate an external CMS system for the page content.
@@ -128,7 +128,7 @@ We have created two new helper functions that can be used to avoid these extra c
 
 ```vue
 <script setup lang="ts">
-import { getCategoryRoute } from "@shopware-pwa/helpers-next";
+import { getCategoryRoute } from "@shopware/helpers";
 </script>
 
 <template>
@@ -142,7 +142,7 @@ import { getCategoryRoute } from "@shopware-pwa/helpers-next";
 
 ```vue
 <script setup lang="ts">
-import { getProductRoute } from "@shopware-pwa/helpers-next";
+import { getProductRoute } from "@shopware/helpers";
 </script>
 
 <template>

apps/docs/src/getting-started/templates/custom-vue-project.md

@@ -38,23 +38,23 @@ You can read more about CMS pages here:
 
 <PageRef page="../cms/content-pages.html" title="Create content pages" sub="Render a content page using components" />
 
-<!-- automd:pm-install name="@shopware-pwa/cms-base" dev -->
+<!-- automd:pm-install name="@shopware/cms-base-layer" dev -->
 
 ```sh
 # ✨ Auto-detect
-npx nypm install -D @shopware-pwa/cms-base
+npx nypm install -D @shopware/cms-base-layer
 
 # npm
-npm install -D @shopware-pwa/cms-base
+npm install -D @shopware/cms-base-layer
 
 # yarn
-yarn add -D @shopware-pwa/cms-base
+yarn add -D @shopware/cms-base-layer
 
 # pnpm
-pnpm install -D @shopware-pwa/cms-base
+pnpm install -D @shopware/cms-base-layer
 
 # bun
-bun install -D @shopware-pwa/cms-base
+bun install -D @shopware/cms-base-layer
 ```
 
 <!-- /automd -->

apps/docs/src/packages/index.md

@@ -8,6 +8,6 @@ nav:
 
 <PageRef title="API Client" sub="Documentation related to the API Client package." page="api-client.html" />
 <PageRef title="CMS Base" sub="Documentation about nuxt module that help you with generating elements from Shopping Experiences." page="cms-base.html" />
-<PageRef title="Nuxt3 module" sub="Documentation related to the Nuxt module that configures a nuxt project for Composable Frontends toolset." page="nuxt3-module.html" />
+<PageRef title="Nuxt module" sub="Documentation related to the Nuxt module that configures a nuxt project for Composable Frontends toolset." page="nuxt-module.html" />
 <PageRef title="Composables" sub="List of all public methods exported within @shopware/composables package." page="composables.html" />
-<PageRef title="Helpers" sub="List of all public methods exported within @shopware-pwa/helpers-next package." page="helpers.html" />
+<PageRef title="Helpers" sub="List of all public methods exported within @shopware/helpers package." page="helpers.html" />

apps/docs/src/resources/integrations/cms/storyblok.md

@@ -34,7 +34,7 @@ On this page we explain the basics of how to integrate it into our [vue-blank te
 5. Now add the storyblok access token to you `nuxt.config.ts` file  
    _(you need a storyblok account to get that token)_
    ```ts
-   modules: ["@shopware-pwa/nuxt3-module", "@storyblok/nuxt"],
+   modules: ["@shopware/nuxt-module", "@storyblok/nuxt"],
      storyblok: {
      accessToken: "super-secret-token"
    },