@haus-storefront-react/vendure-plugin-configs 0.0.1

package/README.md

@@ -0,0 +1,176 @@
+# Vendure Plugin Configs
+
+This package provides a framework for creating and sharing plugin configurations for Vendure-based storefronts. Plugin configs allow you to extend the Vendure SDK with new features, queries, and type-safe entity augmentations—**only when you import the plugin**.
+
+## What is a Plugin Config?
+
+A plugin config is a TypeScript class that encapsulates:
+
+- Feature functions (e.g. `showBadges`)
+- Query/request extensions
+- Optional type augmentation for Vendure entities (e.g. adding `badges` to `Product`)
+
+## How to Create a Plugin Config
+
+1. **Create a new file** in `libs/plugin-configs/vendure/src/lib/`, e.g. `my-plugin.ts`.
+2. **Export a class or constant** that extends the base `VendurePluginConfig`.
+3. **(Optional) Add type augmentation** for Vendure entities by placing a `declare module` block in the same file.
+
+### Example: Badge Plugin
+
+```ts
+import {
+  Asset,
+  Collection,
+  ErrorResult,
+  Maybe,
+  PaginatedList,
+  Product,
+  ProductVariant,
+  SearchResult,
+} from '@haus-storefront-react/shared-types'
+import VendurePluginConfig from './plugin-config'
+import { filter } from 'lodash'
+
+// Type augmentation: Only active if this plugin is imported!
+declare module '@haus-storefront-react/shared-types' {
+  interface Product {
+    badges?: Maybe<Array<Badge>>
+  }
+  interface SearchResult {
+    badges?: Maybe<Array<Badge>>
+  }
+  interface ProductVariant {
+    badges?: Maybe<Array<Badge>>
+  }
+}
+
+export interface BadgePluginRequests {
+  getBadges: () => Promise<PaginatedList<Badge> | ErrorResult>
+}
+
+export type BadgeFeatures = {
+  showBadges: (props: {
+    product?: Product | SearchResult
+    variant?: ProductVariant
+    parentComponent?: string
+    badges: Maybe<Badge[]>
+  }) => { badges: Badge[]; availablePositions?: string[] }
+}
+
+export type Badge = {
+  id: string
+  createdAt: string
+  updatedAt: string
+  collection: Collection
+  collectionId: string
+  position: string
+  asset: Asset
+  assetId: string
+}
+
+export const VendureBadgePlugin = new VendurePluginConfig<BadgeFeatures, BadgePluginRequests>({
+  name: 'badges',
+  enableFeatures: {
+    showBadges: ({ badges = [], parentComponent }) => {
+      // ...implementation
+      return { badges: [], availablePositions: [] }
+    },
+  },
+  queryUpdates: {},
+  settings: {},
+})
+```
+
+## How to Use a Plugin Config in Your App
+
+1. **Import the plugin in your app:**
+   ```ts
+   import { VendureBadgePlugin } from '@haus-storefront-react/vendure-plugin-configs'
+   ```
+2. **Add it to your DataProvider/pluginConfigs:**
+   ```tsx
+   <DataProvider
+     provider="vendure"
+     options={{
+       // ...
+       pluginConfigs: [VendureBadgePlugin.init({ enableFeatures: ['showBadges'] })],
+     }}
+   >
+     {/* ... */}
+   </DataProvider>
+   ```
+3. **TypeScript will now know about `product.badges`!**
+
+### Example: Type-Safe Usage in a Component
+
+```tsx
+import { Product } from '@haus-storefront-react/shared-types'
+
+function ProductBadges({ product }: { product: Product }) {
+  if (!product.badges?.length) return null
+  return (
+    <div>
+      {product.badges.map((badge) => (
+        <span key={badge.id}>{badge.position}</span>
+      ))}
+    </div>
+  )
+}
+```
+
+**Note:** The type augmentation is _opt-in_: Only projects that import the plugin will see the new fields on `Product`, `SearchResult`, etc.
+
+---
+
+## Creating a Plugin Config in an External App
+
+You can also create your own plugin config in an external app (outside this package). This is useful for app-specific features or experiments. See the example below, inspired by `test-plugin.ts`:
+
+### 1. Create your plugin config (e.g. `test-plugin.ts`):
+
+```ts
+import { VendurePluginConfig, PluginFeatures } from '@haus-storefront-react/vendure-plugin-configs'
+
+// Type augmentation: Adds testFeature to PluginFeatureMappings if this plugin is imported
+
+declare module '@haus-storefront-react/vendure-plugin-configs' {
+  interface PluginFeatureMappings {
+    testFeature: (props: { value: string }) => string
+  }
+}
+
+export const TestPlugin = new VendurePluginConfig<PluginFeatures>({
+  name: 'test',
+  enableFeatures: {
+    testFeature: ({ value }: { value: string }) => `Test feature says: ${value}`,
+  },
+  queryUpdates: {},
+  settings: {},
+})
+```
+
+### 2. Use your plugin config in your app:
+
+```tsx
+import { TestPlugin } from './plugin-configs/test-plugin'
+;<DataProvider
+  provider="vendure"
+  options={{
+    // ...
+    pluginConfigs: [TestPlugin.init({ enableFeatures: ['testFeature'] })],
+  }}
+>
+  {/* ... */}
+</DataProvider>
+```
+
+- The `declare module` block ensures TypeScript is aware of your new feature when the plugin is imported.
+- You can add any features, queries, or type augmentations you need for your app.
+
+---
+
+## Nx Commands
+
+- **Build:** `nx build plugin-configs/vendure`
+- **Test:** `nx test plugin-configs/vendure`

package/badge.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index-CzxpJe9c.js"),t=new o.VendurePluginConfig({name:"badges",enableFeatures:{showBadges:({badges:e=[],parentComponent:i})=>{const s=i?t.getSettings().availablePositions[i]:t.getSettings().defaultPositions;return{badges:o.lodashExports.filter(e,a=>s?s.includes(a.position):!0),availablePositions:s}}},queryUpdates:{},settings:{defaultPositions:["top-left","top-right","bottom-left","bottom-right"],availablePositions:{productListItem:["top-left","top-right","bottom-left","bottom-right"],productDetail:["top-left","top-right","bottom-left","bottom-right"],imageCarousel:["top-left","top-right","bottom-left","bottom-right"]}}});t.setQueryUpdates({product:{fields:[{badges:["id","position","assetId",{asset:["id","name","preview","source"]},{collection:["id","name"]}]}]},search:{fields:[{items:[{badges:["id","position","assetId",{asset:["id","name","preview","source"]},{collection:["id","name"]}]}]}]},products:{fields:[{items:[{badges:["id","position","assetId",{asset:["id","name","preview","source"]},{collection:["id","name"]}]}]}]},briefProducts:{fields:[{items:[{badges:["id","position","assetId",{asset:["id","name","preview","source"]},{collection:["id","name"]}]}]}]}});t.setRequests({getBadges:async()=>t.getSdk().createRequest({operation:"badges",fields:["totalItems",{items:["id","createdAt","updatedAt","collectionId","position","assetId",{asset:["id","name","preview","source"]},{collection:["id","name"]}]}]},{options:{take:100}},!1).then(e=>e.data).catch(e=>({message:e.message,errorCode:e.code||"unknown"}))});exports.VendureBadgePlugin=t;

package/badge.mjs

@@ -0,0 +1,91 @@
+import { V as a, l as d } from "./index-RBMJ45wv.mjs";
+const t = new a({
+  name: "badges",
+  enableFeatures: {
+    showBadges: ({
+      badges: e = [],
+      parentComponent: i
+    }) => {
+      const s = i ? t.getSettings().availablePositions[i] : t.getSettings().defaultPositions;
+      return {
+        badges: d.filter(e, (o) => s ? s.includes(o.position) : !0),
+        availablePositions: s
+      };
+    }
+  },
+  queryUpdates: {},
+  settings: {
+    defaultPositions: ["top-left", "top-right", "bottom-left", "bottom-right"],
+    availablePositions: {
+      productListItem: ["top-left", "top-right", "bottom-left", "bottom-right"],
+      productDetail: ["top-left", "top-right", "bottom-left", "bottom-right"],
+      imageCarousel: ["top-left", "top-right", "bottom-left", "bottom-right"]
+    }
+  }
+});
+t.setQueryUpdates({
+  product: {
+    fields: [{
+      badges: ["id", "position", "assetId", {
+        asset: ["id", "name", "preview", "source"]
+      }, {
+        collection: ["id", "name"]
+      }]
+    }]
+  },
+  search: {
+    fields: [{
+      items: [{
+        badges: ["id", "position", "assetId", {
+          asset: ["id", "name", "preview", "source"]
+        }, {
+          collection: ["id", "name"]
+        }]
+      }]
+    }]
+  },
+  products: {
+    fields: [{
+      items: [{
+        badges: ["id", "position", "assetId", {
+          asset: ["id", "name", "preview", "source"]
+        }, {
+          collection: ["id", "name"]
+        }]
+      }]
+    }]
+  },
+  briefProducts: {
+    fields: [{
+      items: [{
+        badges: ["id", "position", "assetId", {
+          asset: ["id", "name", "preview", "source"]
+        }, {
+          collection: ["id", "name"]
+        }]
+      }]
+    }]
+  }
+});
+t.setRequests({
+  getBadges: async () => t.getSdk().createRequest({
+    operation: "badges",
+    fields: ["totalItems", {
+      items: ["id", "createdAt", "updatedAt", "collectionId", "position", "assetId", {
+        asset: ["id", "name", "preview", "source"]
+      }, {
+        collection: ["id", "name"]
+      }]
+    }]
+  }, {
+    options: {
+      take: 100
+    }
+  }, !1).then((e) => e.data).catch((e) => ({
+    message: e.message,
+    errorCode: e.code || "unknown"
+  }))
+});
+export {
+  t as VendureBadgePlugin
+};

package/campaign.js

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ce=require("./index-CzxpJe9c.js"),g=require("react"),le=require("react-native");var b={exports:{}},v={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var L;function fe(){if(L)return v;L=1;var t=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function n(i,u,l){var R=null;if(l!==void 0&&(R=""+l),u.key!==void 0&&(R=""+u.key),"key"in u){l={};for(var p in u)p!=="key"&&(l[p]=u[p])}else l=u;return u=l.ref,{$$typeof:t,type:i,key:R,ref:u!==void 0?u:null,props:l}}return v.Fragment=a,v.jsx=n,v.jsxs=n,v}var _={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var $;function de(){return $||($=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case Z:return"Profiler";case Q:return"StrictMode";case te:return"Suspense";case ne:return"SuspenseList";case oe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case B:return"Portal";case ee:return(e.displayName||"Context")+".Provider";case K:return(e._context.displayName||"Context")+".Consumer";case re:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ae:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case I:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function a(e){return""+e}function n(e){try{a(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),a(e)}}function i(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===I)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function u(){var e=O.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function R(e){if(Y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function p(e,r){function o(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function z(){var e=t(this.type);return q[e]||(q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function X(e,r,o,s,d,f,S,k){return o=f.ref,e={$$typeof:j,type:e,key:r,props:f,_owner:d},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:z}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:k}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function C(e,r,o,s,d,f,S,k){var c=r.children;if(c!==void 0)if(s)if(ue(c)){for(s=0;s<c.length;s++)w(c[s]);Object.freeze&&Object.freeze(c)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(c);if(Y.call(r,"key")){c=t(e);var m=Object.keys(r).filter(function(se){return se!=="key"});s=0<m.length?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}",M[c+s]||(m=0<m.length?"{"+m.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,s,c,m,c),M[c+s]=!0)}if(c=null,o!==void 0&&(n(o),c=""+o),R(r)&&(n(r.key),c=""+r.key),"key"in r){o={};for(var N in r)N!=="key"&&(o[N]=r[N])}else o=r;return c&&p(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),X(e,c,f,d,u(),o,S,k)}function w(e){typeof e=="object"&&e!==null&&e.$$typeof===j&&e._store&&(e._store.validated=1)}var E=g,j=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),Z=Symbol.for("react.profiler"),K=Symbol.for("react.consumer"),ee=Symbol.for("react.context"),re=Symbol.for("react.forward_ref"),te=Symbol.for("react.suspense"),ne=Symbol.for("react.suspense_list"),ae=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),oe=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),O=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,ue=Array.isArray,y=console.createTask?console.createTask:function(){return null};E={"react-stack-bottom-frame":function(e){return e()}};var D,q={},U=E["react-stack-bottom-frame"].bind(E,l)(),F=y(i(l)),M={};_.Fragment=h,_.jsx=function(e,r,o,s,d){var f=1e4>O.recentlyCreatedOwnerStacks++;return C(e,r,o,!1,s,d,f?Error("react-stack-top-frame"):U,f?y(i(e)):F)},_.jsxs=function(e,r,o,s,d){var f=1e4>O.recentlyCreatedOwnerStacks++;return C(e,r,o,!0,s,d,f?Error("react-stack-top-frame"):U,f?y(i(e)):F)}}()),_}var W;function me(){return W||(W=1,process.env.NODE_ENV==="production"?b.exports=fe():b.exports=de()),b.exports}var Re=me(),P={exports:{}},x={};/**
+ * @license React
+ * react-compiler-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var V;function pe(){if(V)return x;V=1;var t=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;return x.c=function(a){return t.H.useMemoCache(a)},x}var A={};/**
+ * @license React
+ * react-compiler-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var G;function ve(){return G||(G=1,process.env.NODE_ENV!=="production"&&function(){var t=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;A.c=function(a){var n=t.H;return n===null&&console.error(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+1. You might have mismatching versions of React and the renderer (such as React DOM)
+2. You might be breaking the Rules of Hooks
+3. You might have more than one copy of React in the same app
+See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`),n.useMemoCache(a)}}()),A}var H;function _e(){return H||(H=1,process.env.NODE_ENV==="production"?P.exports=pe():P.exports=ve()),P.exports}var Ee=_e();function be(t){const{src:a,alt:n,...i}=t;return a?{...i,source:{uri:a}}:i}const Pe=g.forwardRef((t,a)=>{const n=Ee.c(5);if(!t.src)return null;let i;n[0]!==t?(i=be(t),n[0]=t,n[1]=i):i=n[1];let u;return n[2]!==a||n[3]!==i?(u=Re.jsx(le.Image,{ref:a,...i}),n[2]=a,n[3]=i,n[4]=u):u=n[4],u});Pe.displayName="PlatformPrimitiveImage";const T=t=>t==null?0:typeof t=="number"?t:"value"in t?t.value:"min"in t?t.min:0,Te=t=>{const a=t.map(u=>T(u.price)),n=Math.min(...a),i=Math.max(...a);return n===void 0||i===void 0?{value:0}:n===i?{value:n}:{min:n,max:i}},J=new ce.VendurePluginConfig({name:"campaign",enableFeatures:{ordinaryPrice:({variant:t,orderLine:a,searchResult:n,product:i})=>{if(a){const u=a.productVariant;return u?.ordinaryPrice?T(u?.ordinaryPrice)*a.quantity:a.discountedLinePriceWithTax}return t?T(t.ordinaryPrice||0):n?T(n.ordinaryPrice||0):i?Te(i.variants):0}},queryUpdates:{}});J.setQueryUpdates({search:{fields:[{items:[{ordinaryPrice:[{operation:"PriceRange",fields:["min, max"],fragment:!0},{operation:"SinglePrice",fields:["value"],fragment:!0}]}]}]},product:{fields:[{ordinaryPrice:[{operation:"PriceRange",fields:["min, max"],fragment:!0},{operation:"SinglePrice",fields:["value"],fragment:!0}]},{variants:["ordinaryPrice"]}]},briefProducts:{fields:[{items:[{ordinaryPrice:[{operation:"PriceRange",fields:["min, max"],fragment:!0},{operation:"SinglePrice",fields:["value"],fragment:!0}]},{variants:["ordinaryPrice"]}]}]},activeOrder:{fields:[{lines:[{productVariant:["ordinaryPrice"]}]}]},orderByCode:{fields:[{lines:[{productVariant:["ordinaryPrice"]}]}]},adjustOrderLine:{fields:[{fields:[{lines:[{productVariant:["ordinaryPrice"]}]}]}]},addItemToOrder:{fields:[{fields:[{lines:[{productVariant:["ordinaryPrice"]}]}]}]}});exports.VendureCampaignPlugin=J;