feat!: override components and composables (#452)

* feat!: overwrite components and composables * feat: switch api client for cart composables, proper type support and schema overrides * feat(composables): expose `useContext` as public api to help override composables * refactor: new api client in useSalutations Co-authored-by: Maciek Kucmus <[email protected]> * refactor: useListing using new api client types * fix: product card thumbnail * refactor: product listing result * chore: fix linting errors * fix: tests * refactor: useUser using new api client * refactor: useSessionContext * refactor: usenewsletter * refactor: more composables * chore: update tests * refactor: more composables * refactor: more composables - pair programming Co-authored-by: Maciej D <[email protected]> * fix: tests * refactor: fix more types * chore: link to issue * refactor: api errors handling, more types transferred * refactor: remove old api client from dependencies of main template * feat(composables): useNavigationSearch.ts, useWishlist.ts, useLandingSearch.ts (#441) * feat: add useNavigationSearch test * feat: add useWishlist test * feat: add useLandingSearch test * feat: add useLandingSearch test * feat: add defineComponent * feat: add mockImplementation type * feat: add useCmsMeta test * feat(composables): useNavigationSearch.ts, useWishlist.ts, useLandingSearch.ts * refactor: useSetup helper for composables testing and remove old api client dependency from composables package * refactor(nuxt-module): proper setup for new composables structure * feat: proper exporting nuxt layer as separate import * chore: move OPenAPI todos into schema file * chore: move OPenAPI todos into schema file * refactor: use checkout example transformation * chore: error link format * chore: improve build * chore: fix e2e test * chore: add single changeset to fill out later --------- Co-authored-by: Maciek Kucmus <[email protected]> Co-authored-by: mkucmus <[email protected]> Co-authored-by: Maciej D <[email protected]> Co-authored-by: Maciej D <[email protected]>
shopware · Nov 27, 2023 · e2c225f · e2c225f · vercel · Nov 27, 2023
1 parent 0d1cafd
commit e2c225f
Show file tree

Hide file tree

Showing 355 changed files with 7,582 additions and 4,876 deletions.
diff --git a/.changeset/six-bikes-sit.md b/.changeset/six-bikes-sit.md
@@ -0,0 +1,7 @@
+---
+"@shopware-pwa/nuxt3-module": major
+"@shopware-pwa/composables-next": major
+"@shopware-pwa/cms-base": major
+---
+
+Created Nuxt layer for `composables` and `cms-base`. This way overriding any part of that is now possible.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -12,6 +12,7 @@
     "@shopware-pwa/api-client": "workspace:*",
     "@shopware-pwa/composables-next": "workspace:*",
     "@shopware-pwa/helpers-next": "workspace:*",
+    "@shopware-pwa/types": "workspace:*",
     "flexsearch": "^0.7.31",
     "markdown-it": "^13.0.2",
     "vitepress": "1.0.0-beta.7",

diff --git a/apps/docs/src/framework/composables/shared-composables.md b/apps/docs/src/framework/composables/shared-composables.md
@@ -10,7 +10,7 @@ Example:
 ## How do I know which one is shared and what should I do with that?
 
 We're adding information that the composable is shared into the description with a link to this documentation page.
-There is no need to do anything with this information. The only difference is in [overwriting](#overwrite-extend-shared-composable)
+There is no need to do anything with this information. The only difference is in [overwriting](./overwriting-composables.md)
 
 ## Overwrite/extend shared composable
 

diff --git a/apps/docs/src/index.md b/apps/docs/src/index.md
@@ -17,6 +17,10 @@ nav:
 
 Shopware Composable Frontends is Shopware's toolkit for creating platform-agnostic custom storefronts. The demo store implementation is based on Vue.js and Nuxt3.
 
+## Quick Links
+
+- **Announcements**: To keep yourself up to date with the latest news regarding the project, please regularly check our Github Discussions page: [shopware/frontends/dicsussions](https://github.com/shopware/frontends/discussions). Especially the [Announcements](https://github.com/shopware/frontends/discussions/categories/announcements) category.
+
 ## How Shopware Frontends work?
 
 Frontends is a collection of multiple packages that you can use to implement your custom storefront project.

diff --git a/examples/adyen-dropin-component/nuxt.config.ts b/examples/adyen-dropin-component/nuxt.config.ts
@@ -1,4 +1,8 @@
 export default defineNuxtConfig({
+  extends: [
+    "@shopware-pwa/composables-next/nuxt-layer",
+    "@shopware-pwa/cms-base",
+  ],
   runtimeConfig: {
     public: {
       loginData: {
@@ -23,6 +27,6 @@ export default defineNuxtConfig({
   css: [
     "@unocss/reset/tailwind-compat.css", // needed to reset styles see https://unocss.dev/guide/style-reset (@unocss/reset)
   ],
-  modules: ["@shopware-pwa/nuxt3-module", "@unocss/nuxt"],
+  modules: ["@unocss/nuxt", "@shopware-pwa/nuxt3-module"],
   devtools: { enabled: true },
 });
diff --git a/examples/adyen-dropin-component/package.json b/examples/adyen-dropin-component/package.json
@@ -1,14 +1,16 @@
 {
   "private": true,
-  "name": "adyen-dropin-playground",
+  "name": "example-adyen-dropin-playground",
   "type": "module",
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
     "generate": "nuxi generate"
   },
   "devDependencies": {
-    "@adyen/adyen-web": "^5.53.2",
+    "@adyen/adyen-web": "^5.53.3",
+    "@shopware/api-client": "canary",
+    "@shopware-pwa/composables-next": "canary",
     "@shopware-pwa/nuxt3-module": "canary",
     "@shopware-pwa/types": "canary",
     "@unocss/nuxt": "^0.57.6",

diff --git a/examples/blank-playground/src/App.vue b/examples/blank-playground/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSessionContext } from "@shopware-pwa/composables-next";
+import { useSessionContext } from "@shopware-pwa/composables-next/dist";
 
 const { refreshSessionContext, sessionContext } = useSessionContext();
 refreshSessionContext();

diff --git a/examples/blank-playground/src/main.ts b/examples/blank-playground/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp, ref } from "vue";
-import { createShopwareContext } from "@shopware-pwa/composables-next";
+import { createShopwareContext } from "@shopware-pwa/composables-next/dist";
 import { createInstance } from "@shopware-pwa/api-client";
 import Cookies from "js-cookie";
 

diff --git a/examples/commercial-quick-order/README.md b/examples/commercial-quick-order/README.md
@@ -24,7 +24,7 @@ In order to use the example, you need to:
   ```
   VITE_SHOPWARE_API="https://201023-quick-order.swstage.store/"
   VITE_SHOPWARE_ACCESS_KEY="SWSCBHFSNTVMAWNZDNFKSHLAYW"
-  ``` 
+  ```
 
 - Have a customer account with B2B Quick Order feature activated.
 
@@ -45,16 +45,16 @@ or...
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/shopware/frontends/tree/main/examples/commercial-quick-order?file=README.md)
 
-⚠️ Remember to prepare your app first, see __Configuration__ chapter above.
+⚠️ Remember to prepare your app first, see **Configuration** chapter above.
 
 ## 📁 Import file feature
 
-
 file upload can be tested in that format:
+
 ```
 product_number,quantity
 SW10096.3,2
 SW10079,5
 ```
 
-You can use [products.csv](./products.csv)
+You can use [products.csv](./products.csv)
diff --git a/examples/commercial-quick-order/src/App.vue b/examples/commercial-quick-order/src/App.vue
@@ -4,7 +4,7 @@ import {
   useSessionContext,
   useShopwareContext,
   useUser,
-} from "@shopware-pwa/composables-next";
+} from "@shopware-pwa/composables-next/dist";
 import { addCartItems } from "@shopware-pwa/api-client";
 import { onClickOutside, useDebounceFn } from "@vueuse/core";
 

diff --git a/examples/commercial-quick-order/src/main.ts b/examples/commercial-quick-order/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp, ref } from "vue";
-import { createShopwareContext } from "@shopware-pwa/composables-next";
+import { createShopwareContext } from "@shopware-pwa/composables-next/dist";
 import { createInstance } from "@shopware-pwa/api-client";
 import Cookies from "js-cookie";
 

diff --git a/examples/commercial-quick-order/vite.config.js b/examples/commercial-quick-order/vite.config.js
@@ -1,14 +1,14 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});
diff --git a/examples/express-checkout/imports.d.ts b/examples/express-checkout/imports.d.ts
@@ -0,0 +1 @@
+export * from "@shopware-pwa/composables-next";
diff --git a/examples/express-checkout/vite.config.js b/examples/express-checkout/vite.config.js
@@ -1,14 +1,15 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+      "#imports": fileURLToPath(new URL("./imports.d.ts", import.meta.url)),
+    },
+  },
+});
diff --git a/examples/login-form/src/App.vue b/examples/login-form/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useUser } from "@shopware-pwa/composables-next";
+import { useUser } from "@shopware-pwa/composables-next/dist";
 import type { ClientApiError, ShopwareError } from "@shopware-pwa/types";
 import { reactive, ref } from "vue";
 const { logout, login, isLoggedIn, user } = useUser();

diff --git a/examples/login-form/src/main.ts b/examples/login-form/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp, ref } from "vue";
-import { createShopwareContext } from "@shopware-pwa/composables-next";
+import { createShopwareContext } from "@shopware-pwa/composables-next/dist";
 import { createInstance } from "@shopware-pwa/api-client";
 import Cookies from "js-cookie";
 

diff --git a/examples/mollie-credit-card/README.md b/examples/mollie-credit-card/README.md
@@ -52,7 +52,7 @@ mollie: {
 
 ```html
 <script setup lang="ts">
-  import { useCheckout } from "@shopware-pwa/composables-next";
+  import { useCheckout } from "@shopware-pwa/composables-next/dist";
   const { selectedPaymentMethod } = useCheckout();
   // the name may vary, so first, please check what comes from API
   const showMollieCreditCardComponent = computed(

diff --git a/examples/mollie-credit-card/src/runtime/components/ShopwareFrontendsCreditCard.vue b/examples/mollie-credit-card/src/runtime/components/ShopwareFrontendsCreditCard.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { useShopwareContext, useUser } from "@shopware-pwa/composables-next";
+import {
+  useShopwareContext,
+  useUser,
+} from "@shopware-pwa/composables-next/dist";
 const { apiInstance } = useShopwareContext();
 const { user } = useUser();
 import type { MollieLocale } from "../../types";

diff --git a/examples/mollie-credit-card/tsconfig.json b/examples/mollie-credit-card/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "module": "esnext"
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
   },
   "extends": "./playground/.nuxt/tsconfig.json"
 }
diff --git a/examples/new-api-client/shopware.d.ts b/examples/new-api-client/shopware.d.ts
@@ -0,0 +1,36 @@
+declare module "#shopware" {
+  import type { createAPIClient } from "@shopware/api-client";
+  import type {
+    operationPaths as defaultOperationPaths,
+    operations as defaultOperations,
+    components as defaultComponents,
+  } from "@shopware/api-client/api-types";
+  import type {
+    RequestParameters as DefaultRequestParameters,
+    RequestReturnType as DefaultRequestReturnType,
+  } from "@shopware/api-client";
+
+  type changedComponents = defaultComponents;
+  // example how to extend Cart schema:
+  // type changedComponents = components & {
+  //   schemas: {
+  //     Cart: defaultComponents["schemas"]["Cart"] & {
+  //       myspecialfield: "hello field";
+  //     };
+  //   };
+  // };
+
+  export type operations = defaultOperations<changedComponents>;
+  export type operationPaths = defaultOperationPaths;
+  export type Schemas = changedComponents["schemas"];
+
+  // we're exporting our own Api Client definition as it depends on our own instance
+  export type ApiClient = ReturnType<
+    typeof createAPIClient<operations, operationPaths>
+  >;
+  export type RequestParameters<T extends keyof operations> =
+    DefaultRequestParameters<T, operations>;
+
+  export type RequestReturnType<T extends keyof operations> =
+    DefaultRequestReturnType<T, operations>;
+}
diff --git a/examples/new-api-client/src/App.vue b/examples/new-api-client/src/App.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { apiClient, ApiReturnType } from "./apiClient";
+import { apiClient } from "./apiClient";
 import HelloWorld from "./components/HelloWorld.vue";
 import LoginForm from "./components/LoginForm.vue";
 import AdminLoginForm from "./components/AdminLoginForm.vue";
 import { adminApiClient } from "./adminApiClient";
 import { ApiClientError } from "@shopware/api-client";
+import type { RequestReturnType } from "#shopware";
 
-const productsResponse = ref<ApiReturnType<"readProduct">>();
+const productsResponse = ref<RequestReturnType<"readProduct">>();
 
 onMounted(async () => {
   await apiClient.invoke("readContext get /context", {});

diff --git a/examples/new-api-client/src/apiClient.ts b/examples/new-api-client/src/apiClient.ts
@@ -1,13 +1,5 @@
-import {
-  RequestParameters,
-  RequestReturnType,
-  createAPIClient,
-} from "@shopware/api-client";
-import type {
-  operationPaths,
-  operations,
-  components,
-} from "@shopware/api-client/api-types";
+import { RequestParameters, createAPIClient } from "@shopware/api-client";
+import type { operationPaths, operations } from "#shopware";
 import Cookies from "js-cookie";
 
 export const apiClient = createAPIClient<operations, operationPaths>({
@@ -24,14 +16,8 @@ export const apiClient = createAPIClient<operations, operationPaths>({
   },
 });
 
-export type ApiSchemas = components["schemas"];
-export type ApiRequestParams<OPERATION_NAME extends keyof operations> =
-  RequestParameters<OPERATION_NAME, operations>;
-export type ApiReturnType<OPERATION_NAME extends keyof operations> =
-  RequestReturnType<OPERATION_NAME, operations>;
-
 // predefine navigation loading method with depth settings
-export const readNavigation = (params: ApiRequestParams<"readNavigation">) =>
+export const readNavigation = (params: RequestParameters<"readNavigation">) =>
   apiClient.invoke(
     "readNavigation post /navigation/{activeId}/{rootId} sw-include-seo-urls",
     {

diff --git a/examples/new-api-client/tsconfig.json b/examples/new-api-client/tsconfig.json
@@ -14,6 +14,12 @@
     "noEmit": true,
     "types": ["vite/client"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": [
+    "src/**/*.ts",
+    "**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "shopware.d.ts"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/examples/product-detail-page/src/App.vue b/examples/product-detail-page/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useProductSearch } from "@shopware-pwa/composables-next";
+import { useProductSearch } from "@shopware-pwa/composables-next/dist";
 import type { Product } from "@shopware-pwa/types";
 import ProductView from "@/components/ProductView.vue";
 

diff --git a/examples/product-detail-page/src/components/ProductCard.vue b/examples/product-detail-page/src/components/ProductCard.vue
@@ -8,7 +8,7 @@ import {
   useAddToCart,
   useProductPrice,
   usePrice,
-} from "@shopware-pwa/composables-next";
+} from "@shopware-pwa/composables-next/dist";
 import type { Product } from "@shopware-pwa/types";
 
 const props = defineProps<{

diff --git a/examples/product-detail-page/src/components/ProductView.vue b/examples/product-detail-page/src/components/ProductView.vue
@@ -10,7 +10,7 @@ import {
   useProductPrice,
   usePrice,
   useProductAssociations,
-} from "@shopware-pwa/composables-next";
+} from "@shopware-pwa/composables-next/dist";
 import ProductCard from "./ProductCard.vue";
 
 const props = defineProps<{

diff --git a/examples/product-detail-page/src/main.ts b/examples/product-detail-page/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp, ref } from "vue";
-import { createShopwareContext } from "@shopware-pwa/composables-next";
+import { createShopwareContext } from "@shopware-pwa/composables-next/dist";
 import { createInstance } from "@shopware-pwa/api-client";
 import Cookies from "js-cookie";
 

diff --git a/examples/responsive-images/src/components/Image.vue b/examples/responsive-images/src/components/Image.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useProductSearch } from "@shopware-pwa/composables-next";
+import { useProductSearch } from "@shopware-pwa/composables-next/dist";
 
 const { search } = useProductSearch();
 // look for some product

diff --git a/examples/responsive-images/src/main.ts b/examples/responsive-images/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp, ref } from "vue";
-import { createShopwareContext } from "@shopware-pwa/composables-next";
+import { createShopwareContext } from "@shopware-pwa/composables-next/dist";
 import { createInstance } from "@shopware-pwa/api-client";
 import Cookies from "js-cookie";
 

diff --git a/examples/responsive-images/tsconfig.json b/examples/responsive-images/tsconfig.json
@@ -1,20 +1,14 @@
 {
-  "include": [
-    "src/**/*"
-  ],
+  "include": ["src/**/*"],
   "compilerOptions": {
+    "module": "esnext",
     "paths": {
       "@/*": [
         "./src/*" // set path `@/*` as alias of `src/*`
       ]
     },
     "esModuleInterop": true,
-    "lib": [
-      "esnext",
-      "DOM"
-    ],
-    "types": [
-      "vite/client"
-    ]
+    "lib": ["esnext", "DOM"],
+    "types": ["vite/client"]
   }
-}
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from "@shopware-pwa/composables-next";