@teamnovu/kit-shopware-composables 0.0.2 → 0.0.4

package/src/util/useOptimistic.ts

@@ -0,0 +1,49 @@
+import { MutationOptions, QueryKey, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+
+// https://tanstack.com/query/latest/docs/framework/vue/guides/optimistic-updates#via-the-cache
+export function useOptimistic<CacheValue, UpdateValue>(
+  queryKey: QueryKey,
+  updateFn: (newValue: UpdateValue, oldValue: CacheValue) => CacheValue,
+  options?: UseMutationOptions<unknown, unknown, UpdateValue, unknown>,
+) {
+  const queryClient = useQueryClient()
+
+  return {
+    onMutate: async (newValue: UpdateValue) => {
+      await queryClient.cancelQueries({ queryKey: queryKey })
+
+      const previousValue = queryClient.getQueryData(queryKey) as CacheValue | undefined
+
+      queryClient.setQueryData(queryKey, (oldValue: CacheValue) => updateFn(newValue, oldValue))
+
+      if (options) {
+        const opts = unref(options)
+        const onMutate = unref(opts.onMutate)
+        onMutate?.(newValue)
+      }
+
+      return { previousValue }
+    },
+    onError: (err, newValue: UpdateValue, context) => {
+      if (context) {
+        queryClient.setQueryData(queryKey, context.previousValue)
+      }
+
+      if (options) {
+        const opts = unref(options)
+        const onError = unref(opts.onError)
+        onError?.(err, newValue, context)
+      }
+    },
+    onSettled: (...args) => {
+      queryClient.invalidateQueries({ queryKey })
+
+      if (options) {
+        const opts = unref(options)
+        const onSettled = unref(opts.onSettled)
+        onSettled?.(...args)
+      }
+    },
+  } satisfies MutationOptions<unknown, unknown, UpdateValue, { previousValue?: CacheValue }>
+}

package/tsconfig.json

@@ -8,16 +8,19 @@
       "vitest/globals"
     ],
     "paths": {
+      "#types": [
+        "./src/types.d.ts"
+      ],
       "#store-types": [
         "./api-types/storeApiTypes.d.ts"
       ]
     },
     "typeRoots": [
       "./node_modules"
-    ],
+    ]
   },
   "include": [
     "src/**/*",
     "../components/src/injects"
   ]
-}
+}

package/dist/context/useContextOptions.d.ts

@@ -1,9 +0,0 @@
-import { operations } from '../../api-types/storeApiTypes.d.ts';
-import { UndefinedInitialQueryOptions } from '@tanstack/vue-query';
-import { OperationProp } from '@teamnovu/kit-shopware-api-client';
-export declare function useContextOptions<Operations extends operations>(): UndefinedInitialQueryOptions<OperationProp<operations & Operations, "readContext get /context", "response">, Error, OperationProp<operations & Operations, "readContext get /context", "response">, readonly ["context"]> & {
-    queryKey: readonly ["context"] & {
-        [dataTagSymbol]: OperationProp<operations & Operations, "readContext get /context", "response">;
-        [dataTagErrorSymbol]: Error;
-    };
-};

package/dist/context/useContextUpdate.d.ts

@@ -1,4 +0,0 @@
-import { operations } from '../../api-types/storeApiTypes.d.ts';
-import { UseMutationReturnType, MutationObserverIdleResult, MutationObserverLoadingResult, MutationObserverErrorResult, MutationObserverSuccessResult } from '@tanstack/vue-query';
-import { OperationProp } from '@teamnovu/kit-shopware-api-client';
-export declare function useContextUpdate<Operations extends operations>(): UseMutationReturnType<OperationProp<operations & Operations, "updateContext patch /context", "response">, Error, void, unknown, Omit< MutationObserverIdleResult<OperationProp<operations & Operations, "updateContext patch /context", "response">, Error, void, unknown>, "mutate" | "reset"> | Omit< MutationObserverLoadingResult<OperationProp<operations & Operations, "updateContext patch /context", "response">, Error, void, unknown>, "mutate" | "reset"> | Omit< MutationObserverErrorResult<OperationProp<operations & Operations, "updateContext patch /context", "response">, Error, void, unknown>, "mutate" | "reset"> | Omit< MutationObserverSuccessResult<OperationProp<operations & Operations, "updateContext patch /context", "response">, Error, void, unknown>, "mutate" | "reset">>;

package/dist/products/useCategoryQueryOptions.d.ts

@@ -1,17 +0,0 @@
-import { operations } from '../../api-types/storeApiTypes.d.ts';
-import { MaybeRef } from 'vue';
-import { OperationBody } from '../types/query';
-import { UndefinedInitialQueryOptions } from '@tanstack/vue-query';
-import { OperationProp } from '@teamnovu/kit-shopware-api-client';
-declare const readCategoryListOperation = "readCategoryList post /category";
-export declare function useCategoryQueryOptions<Operations extends operations>(body?: MaybeRef<OperationBody<Operations, typeof readCategoryListOperation>>): UndefinedInitialQueryOptions<OperationProp<operations & Operations, "readCategoryList post /category", "response">, Error, OperationProp<operations & Operations, "readCategoryList post /category", "response">, readonly ["category", "list", {
-    readonly body: unknown;
-}]> & {
-    queryKey: readonly ["category", "list", {
-        readonly body: unknown;
-    }] & {
-        [dataTagSymbol]: OperationProp<operations & Operations, "readCategoryList post /category", "response">;
-        [dataTagErrorSymbol]: Error;
-    };
-};
-export {};

package/dist/products/useProductListingQueryOptions.d.ts

@@ -1,19 +0,0 @@
-import { operations } from '../../api-types/storeApiTypes.d.ts';
-import { MaybeRef } from 'vue';
-import { OperationBody } from '../types/query';
-import { UndefinedInitialQueryOptions } from '@tanstack/vue-query';
-import { OperationProp } from '@teamnovu/kit-shopware-api-client';
-declare const readListingOperation = "readCompactProductListing post /novu/headless/product-listing/{seoUrl}";
-export declare function useProductListingQueryOptions<Operations extends operations>(seoUrl: MaybeRef<string>, body?: MaybeRef<OperationBody<Operations, typeof readListingOperation>>): UndefinedInitialQueryOptions<OperationProp<operations & Operations, "readCompactProductListing post /novu/headless/product-listing/{seoUrl}", "response">, Error, OperationProp<operations & Operations, "readCompactProductListing post /novu/headless/product-listing/{seoUrl}", "response">, readonly ["product", "list", {
-    readonly url: MaybeRef<string>;
-    readonly body: unknown;
-}]> & {
-    queryKey: readonly ["product", "list", {
-        readonly url: MaybeRef<string>;
-        readonly body: unknown;
-    }] & {
-        [dataTagSymbol]: OperationProp<operations & Operations, "readCompactProductListing post /novu/headless/product-listing/{seoUrl}", "response">;
-        [dataTagErrorSymbol]: Error;
-    };
-};
-export {};

package/dist/products/useProductListingQueryOptions.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/products/useProductPrice.d.ts

@@ -1,48 +0,0 @@
-import { Schemas } from '../../api-types/storeApiTypes.d.ts';
-import { TierPrice } from '@shopware/helpers';
-import { ComputedRef, Ref } from 'vue';
-export type UseProductPriceReturn = {
-    /**
-     * Whole calculated price object
-     */
-    price: ComputedRef<Schemas['CalculatedPrice'] | undefined>;
-    /**
-     * Calculated price value for one selling unit
-     */
-    totalPrice: ComputedRef<number | undefined>;
-    /**
-     * Current unit price value
-     */
-    unitPrice: ComputedRef<number | undefined>;
-    /**
-     * Can be used if isListPrice is set to true
-     */
-    referencePrice: ComputedRef<Schemas['CalculatedPrice']['referencePrice'] | undefined>;
-    /**
-     * determines if `price` contains the minimum tier price
-     */
-    displayFrom: ComputedRef<boolean>;
-    /**
-     * cheapest price value for a variant if exists
-     */
-    displayFromVariants: ComputedRef<number | false | undefined>;
-    /**
-     * array of TierPrice object
-     */
-    tierPrices: ComputedRef<TierPrice[]>;
-    /**
-     * determines whether a discount price is set
-     */
-    isListPrice: ComputedRef<boolean>;
-    /**
-     * price for products with regulation price
-     */
-    regulationPrice: ComputedRef<number | undefined>;
-};
-/**
- * The purpose of the `useProductPrice` function is to abstract the logic to expose most useful helpers for price displaying.
- *
- * @public
- * @category Product
- */
-export declare function useProductPrice(product: Ref<Schemas['Product'] | undefined>): UseProductPriceReturn;

package/dist/products/useProductQueryOptions.d.ts

@@ -1,19 +0,0 @@
-import { operations } from '../../api-types/storeApiTypes.d.ts';
-import { MaybeRef } from 'vue';
-import { OperationBody } from '../types/query';
-import { UndefinedInitialQueryOptions } from '@tanstack/vue-query';
-import { OperationProp } from '@teamnovu/kit-shopware-api-client';
-declare const readCustomProductDetailOperation = "readCustomProductDetail post /novu/headless/product/{seoUrl}";
-export declare function useProductQueryOptions<Operations extends operations>(seoUrl: MaybeRef<string>, body?: MaybeRef<OperationBody<Operations, typeof readCustomProductDetailOperation>>): UndefinedInitialQueryOptions<OperationProp<operations & Operations, "readCustomProductDetail post /novu/headless/product/{seoUrl}", "response">, Error, OperationProp<operations & Operations, "readCustomProductDetail post /novu/headless/product/{seoUrl}", "response">, readonly ["product", "detail", {
-    readonly url: MaybeRef<string>;
-    readonly body: unknown;
-}]> & {
-    queryKey: readonly ["product", "detail", {
-        readonly url: MaybeRef<string>;
-        readonly body: unknown;
-    }] & {
-        [dataTagSymbol]: OperationProp<operations & Operations, "readCustomProductDetail post /novu/headless/product/{seoUrl}", "response">;
-        [dataTagErrorSymbol]: Error;
-    };
-};
-export {};

package/dist/types/query.d.ts

@@ -1,7 +0,0 @@
-import { operations } from '../../api-types/storeApiTypes.d.ts';
-import { QueryKey, UseQueryOptions } from '@tanstack/vue-query';
-import { OperationProp } from '@teamnovu/kit-shopware-api-client';
-export type OperationKey = keyof operations;
-export type OperationBody<Operations extends operations, K extends OperationKey> = OperationProp<Operations, K, 'body'>;
-export type OperationResponse<Operations extends operations, K extends OperationKey> = OperationProp<Operations, K, 'response'>;
-export type Options<Operations extends operations, K extends OperationKey, QK extends QueryKey = QueryKey> = UseQueryOptions<OperationResponse<Operations, K>, Error, OperationResponse<Operations, K>, OperationResponse<Operations, K>, QK>;

package/eslint.config.mjs

@@ -1,84 +0,0 @@
-import js from '@eslint/js'
-import pluginStylistic from '@stylistic/eslint-plugin'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  js.configs.recommended,
-  tseslint.configs.recommended,
-  pluginStylistic.configs['recommended'],
-  {
-    rules: {
-      // stylistic
-      // ********************
-      '@stylistic/newline-per-chained-call': [
-        'error',
-        { ignoreChainWithDepth: 2 },
-      ],
-      '@stylistic/nonblock-statement-body-position': 'error',
-      '@stylistic/one-var-declaration-per-line': 'error',
-      '@stylistic/operator-linebreak': [
-        'error',
-        'before',
-        { overrides: { '=': 'none' } },
-      ],
-      '@stylistic/function-paren-newline': ['error', 'multiline-arguments'],
-      '@stylistic/dot-location': ['error', 'property'],
-      '@stylistic/no-mixed-operators': ['error', { allowSamePrecedence: true }],
-      '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
-      '@stylistic/array-bracket-newline': ['error', { multiline: true }],
-      '@stylistic/array-element-newline': [
-        'error',
-        {
-          multiline: true,
-          consistent: true,
-        },
-      ],
-      '@stylistic/max-len': [
-        'warn',
-        {
-          code: 150,
-          tabWidth: 2,
-        },
-      ],
-      '@stylistic/object-curly-newline': [
-        'error',
-        {
-          multiline: true,
-          consistent: true,
-        },
-      ],
-      '@stylistic/object-property-newline': [
-        'error',
-        { allowAllPropertiesOnSameLine: false },
-      ],
-
-      // common
-      // ********************
-      'no-console': ['error', { allow: ['warn', 'error'] }],
-      'prefer-destructuring': [
-        'error',
-        {
-          array: false,
-          object: true,
-        },
-      ],
-      'no-unused-vars': 'off',
-      'eqeqeq': ['error', 'smart'],
-      'no-undef': 'off', // done by typescript
-      '@typescript-eslint/consistent-type-imports': 'error',
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-unused-vars': [
-        'error',
-        {
-          args: 'all',
-          argsIgnorePattern: '^_',
-          caughtErrors: 'all',
-          caughtErrorsIgnorePattern: '^_',
-          destructuredArrayIgnorePattern: '^_',
-          varsIgnorePattern: '^_',
-          ignoreRestSiblings: true,
-        },
-      ],
-    },
-  },
-)

package/src/context/useContextOptions.ts

@@ -1,16 +0,0 @@
-import type { operations } from '#store-types'
-import { queryOptions } from '@tanstack/vue-query'
-import { useShopwareQueryClient } from '../inject'
-import { contextKeys } from '../keys'
-import type { OperationKey } from '../types/query'
-
-const readContextOperation = 'readContext get /context' satisfies OperationKey
-
-export function useContextOptions<Operations extends operations>() {
-  const client = useShopwareQueryClient<Operations>()
-
-  return queryOptions({
-    queryKey: contextKeys.all(),
-    queryFn: () => client.query(readContextOperation),
-  })
-}

package/src/context/useContextUpdate.ts

@@ -1,16 +0,0 @@
-import type { operations } from '#store-types'
-import { useMutation } from '@tanstack/vue-query'
-import { useShopwareQueryClient } from '../inject'
-import type { OperationKey } from '../types/query'
-
-const updateContextOperation = 'updateContext patch /context' satisfies OperationKey
-
-export function useContextUpdate<Operations extends operations>() {
-  const client = useShopwareQueryClient<Operations>()
-
-  return useMutation({
-    mutationFn: async () => {
-      return client.query(updateContextOperation)
-    },
-  })
-}

package/src/products/useCategoryQueryOptions.ts

@@ -1,25 +0,0 @@
-import type { operations } from '#store-types'
-import { queryOptions } from '@tanstack/vue-query'
-import type { MaybeRef } from 'vue'
-import { unref } from 'vue'
-import { useShopwareQueryClient } from '../inject'
-import { categoryKeys } from '../keys'
-import type { OperationBody, OperationKey } from '../types/query'
-
-const readCategoryListOperation = 'readCategoryList post /category' satisfies OperationKey
-
-export function useCategoryQueryOptions<Operations extends operations>(
-  body?: MaybeRef<OperationBody<Operations, typeof readCategoryListOperation>>,
-) {
-  const client = useShopwareQueryClient<Operations>()
-  const queryKey = categoryKeys.list(body)
-
-  return queryOptions({
-    queryKey,
-    queryFn: async () => {
-      return client.query(readCategoryListOperation, {
-        body: unref(body),
-      })
-    },
-  })
-}

package/src/products/useProductListingQueryOptions.test.ts

@@ -1,24 +0,0 @@
-import { useQuery, VueQueryPlugin } from '@tanstack/vue-query'
-import { ShopwareClient } from '@teamnovu/kit-shopware-api-client'
-import { createApp } from 'vue'
-import { shopwareClientKey } from '../inject'
-import { useProductListingQueryOptions } from './useProductListingQueryOptions'
-
-test('useProducts receives products', async () => {
-  const app = createApp({ template: '' })
-
-  app.provide(shopwareClientKey, new ShopwareClient({
-    apiKey: import.meta.env.VITE_SHOPWARE_ACCESS_KEY,
-    baseURL: import.meta.env.VITE_SHOPWARE_URL,
-  }))
-
-  app.use(VueQueryPlugin)
-
-  await app.runWithContext(async () => {
-    const { data, suspense } = useQuery(useProductListingQueryOptions('/Food/Bakery-products/'))
-
-    await suspense()
-
-    expect(data).toBeTruthy()
-  })
-})

package/src/products/useProductListingQueryOptions.ts

@@ -1,28 +0,0 @@
-import type { operations } from '#store-types'
-import { queryOptions } from '@tanstack/vue-query'
-import type { MaybeRef } from 'vue'
-import { unref } from 'vue'
-import { useShopwareQueryClient } from '../inject'
-import { productKeys } from '../keys'
-import type { OperationBody, OperationKey } from '../types/query'
-import { relativizeSeoUrl } from '../util/url'
-
-const readListingOperation = 'readCompactProductListing post /novu/headless/product-listing/{seoUrl}' satisfies OperationKey
-
-export function useProductListingQueryOptions<Operations extends operations>(
-  seoUrl: MaybeRef<string>,
-  body?: MaybeRef<OperationBody<Operations, typeof readListingOperation>>,
-) {
-  const client = useShopwareQueryClient<Operations>()
-  const queryKey = productKeys.list(seoUrl, body)
-
-  return queryOptions({
-    queryKey,
-    queryFn: async () => {
-      return client.query(readListingOperation, {
-        params: { seoUrl: relativizeSeoUrl(unref(seoUrl)) },
-        body: unref(body),
-      })
-    },
-  })
-}

package/src/products/useProductQueryOptions.ts

@@ -1,28 +0,0 @@
-import type { operations } from '#store-types'
-import { queryOptions } from '@tanstack/vue-query'
-import type { MaybeRef } from 'vue'
-import { unref } from 'vue'
-import { useShopwareQueryClient } from '../inject'
-import { productKeys } from '../keys'
-import type { OperationBody, OperationKey } from '../types/query'
-import { relativizeSeoUrl } from '../util/url'
-
-const readCustomProductDetailOperation = 'readCustomProductDetail post /novu/headless/product/{seoUrl}' satisfies OperationKey
-
-export function useProductQueryOptions<Operations extends operations>(
-  seoUrl: MaybeRef<string>,
-  body?: MaybeRef<OperationBody<Operations, typeof readCustomProductDetailOperation>>,
-) {
-  const client = useShopwareQueryClient<Operations>()
-  const queryKey = productKeys.detail(seoUrl, body)
-
-  return queryOptions({
-    queryKey,
-    queryFn: async () => {
-      return client.query(readCustomProductDetailOperation, {
-        params: { seoUrl: relativizeSeoUrl(unref(seoUrl)) },
-        body: unref(body),
-      })
-    },
-  })
-}

package/src/types/query.ts

@@ -1,18 +0,0 @@
-import type { operations } from '#store-types'
-import type { QueryKey, UseQueryOptions } from '@tanstack/vue-query'
-import type { OperationProp } from '@teamnovu/kit-shopware-api-client'
-
-export type OperationKey = keyof operations
-export type OperationBody<Operations extends operations, K extends OperationKey> =
-  OperationProp<Operations, K, 'body'>
-export type OperationResponse<Operations extends operations, K extends OperationKey> =
-  OperationProp<Operations, K, 'response'>
-
-export type Options<Operations extends operations, K extends OperationKey, QK extends QueryKey = QueryKey> =
-  UseQueryOptions<
-    OperationResponse<Operations, K>,
-    Error,
-    OperationResponse<Operations, K>,
-    OperationResponse<Operations, K>,
-    QK
-  >