@plasmicpkgs/commerce 0.0.13 → 0.0.16

package/dist/commerce.esm.js

@@ -964,6 +964,7 @@ var defaultProduct = {
 
 var ProductContext = /*#__PURE__*/React.createContext(undefined);
 var CategoryContext = /*#__PURE__*/React.createContext(undefined);
+var SliderContext = /*#__PURE__*/React.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -988,6 +989,20 @@ function CategoryProvider(_ref2) {
 var useCategoryContext = function useCategoryContext() {
   return useContext(CategoryContext);
 };
+function ProductSliderProvider(_ref3) {
+  var mediaIndex = _ref3.mediaIndex,
+      onClick = _ref3.onClick,
+      children = _ref3.children;
+  return React.createElement(SliderContext.Provider, {
+    value: mediaIndex,
+    key: mediaIndex
+  }, React.cloneElement(React.isValidElement(children) ? children : React.createElement(React.Fragment, null), {
+    onClick: onClick
+  }));
+}
+var useProductSliderContext = function useProductSliderContext() {
+  return useContext(SliderContext);
+};
 
 var _excluded = ["children"];
 var Commerce = /*#__PURE__*/createContext({});
@@ -1539,13 +1554,6 @@ var useCategories = function useCategories(input) {
   }, hook))(input);
 };
 
-var useCommerceExtraFeatures = function useCommerceExtraFeatures() {
-  var _useCommerce = useCommerce(),
-      providerRef = _useCommerce.providerRef;
-
-  return providerRef.current.extraFeatures;
-};
-
 var categoryCollectionMeta = {
   name: "plasmic-commerce-category-collection",
   displayName: "Category Collection",
@@ -1593,8 +1601,10 @@ var categoryCollectionMeta = {
         var _ctx$categories$map;
 
         return (_ctx$categories$map = ctx == null ? void 0 : ctx.categories.map(function (category) {
+          var _category$depth;
+
           return {
-            label: category.name,
+            label: "" + "  ".repeat((_category$depth = category.depth) != null ? _category$depth : 0) + category.name,
             value: category.id
           };
         })) != null ? _ctx$categories$map : [];
@@ -1619,7 +1629,6 @@ function CategoryCollection(props) {
       emptyMessage = props.emptyMessage,
       selectedCategory = props.category,
       setControlContextData = props.setControlContextData;
-  var features = useCommerceExtraFeatures();
   var inEditor = React.useContext(PlasmicCanvasContext);
 
   var _useCategories = useCategories(),
@@ -1628,7 +1637,6 @@ function CategoryCollection(props) {
 
   var _useCategories2 = useCategories({
     categoryId: selectedCategory,
-    topologicalSort: !selectedCategory && (features == null ? void 0 : features.includeSubCategories),
     addIsEmptyField: !!inEditor
   }),
       categories = _useCategories2.data,
@@ -1767,6 +1775,61 @@ function registerCategoryLink(loader, customCategoryLinkMeta) {
   doRegisterComponent(CategoryLink, customCategoryLinkMeta != null ? customCategoryLinkMeta : categoryLinkMeta);
 }
 
+var categoryMediaMeta = {
+  name: "plasmic-commerce-category-media",
+  displayName: "Category Media",
+  props: {
+    mediaIndex: "number",
+    mediaSize: {
+      type: "choice",
+      options: [{
+        label: "Fill",
+        value: "fill"
+      }, {
+        label: "Container",
+        value: "contain"
+      }, {
+        label: "Cover",
+        value: "cover"
+      }, {
+        label: "None",
+        value: "none"
+      }, {
+        label: "Scale down",
+        value: "scale-down"
+      }]
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "CategoryMedia"
+};
+function CategoryMedia(props) {
+  var _image$url;
+
+  var className = props.className,
+      _props$mediaIndex = props.mediaIndex,
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
+      mediaSize = props.mediaSize;
+  var category = useCategoryContext();
+  var image = category != null && category.images ? category.images[mediaIndex] : undefined;
+  return React.createElement("img", {
+    alt: (category == null ? void 0 : category.name) || "Category Image",
+    src: (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "",
+    loading: "lazy",
+    className: className,
+    style: {
+      objectFit: mediaSize
+    }
+  });
+}
+function registerCategoryMedia(loader, customCategoryMediaMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(CategoryMedia, customCategoryMediaMeta != null ? customCategoryMediaMeta : categoryMediaMeta);
+}
+
 var fetcher$3 = SWRFetcher;
 
 var fn$3 = function fn(provider) {
@@ -1892,6 +1955,13 @@ var useBrands = function useBrands(input) {
   }, hook))(input);
 };
 
+var useCommerceExtraFeatures = function useCommerceExtraFeatures() {
+  var _useCommerce = useCommerce(),
+      providerRef = _useCommerce.providerRef;
+
+  return providerRef.current.extraFeatures;
+};
+
 var productCollectionMeta = {
   name: "plasmic-commerce-product-collection",
   displayName: "Product Collection",
@@ -1937,8 +2007,10 @@ var productCollectionMeta = {
         var _ctx$categories$map;
 
         return (_ctx$categories$map = ctx == null ? void 0 : ctx.categories.map(function (category) {
+          var _category$depth;
+
           return {
-            label: category.name,
+            label: "" + "  ".repeat((_category$depth = category.depth) != null ? _category$depth : 0) + category.name,
             value: category.id
           };
         })) != null ? _ctx$categories$map : [];
@@ -2144,7 +2216,26 @@ var productMediaMeta = {
   name: "plasmic-commerce-product-media",
   displayName: "Product Media",
   props: {
-    mediaIndex: "number"
+    mediaIndex: "number",
+    mediaSize: {
+      type: "choice",
+      options: [{
+        label: "Fill",
+        value: "fill"
+      }, {
+        label: "Container",
+        value: "contain"
+      }, {
+        label: "Cover",
+        value: "cover"
+      }, {
+        label: "None",
+        value: "none"
+      }, {
+        label: "Scale down",
+        value: "scale-down"
+      }]
+    }
   },
   importPath: "@plasmicpkgs/commerce",
   importName: "ProductMedia"
@@ -2154,14 +2245,19 @@ function ProductMedia(props) {
 
   var className = props.className,
       _props$mediaIndex = props.mediaIndex,
-      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex;
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
+      mediaSize = props.mediaSize;
   var product = useProduct();
-  var image = product == null ? void 0 : product.images[mediaIndex];
+  var sliderContext = useProductSliderContext();
+  var image = product == null ? void 0 : product.images[sliderContext != null ? sliderContext : mediaIndex];
   return React.createElement("img", {
-    alt: (product == null ? void 0 : product.name) || 'Product Image',
+    alt: (product == null ? void 0 : product.name) || "Product Image",
     src: product ? (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "" : placeholderImage,
-    loading: 'lazy',
-    className: className
+    loading: "lazy",
+    className: className,
+    style: {
+      objectFit: mediaSize
+    }
   });
 }
 function registerProductMedia(loader, customProductMediaMeta) {
@@ -2256,6 +2352,90 @@ function registerProductQuantity(loader, customProductQuantityMeta) {
   doRegisterComponent(ProductQuantity, customProductQuantityMeta != null ? customProductQuantityMeta : productQuantityMeta);
 }
 
+var productSliderMeta = {
+  name: "plasmic-commerce-product-slider",
+  displayName: "Product Slider",
+  props: {
+    thumbsVisible: {
+      type: "number",
+      description: "Number of thumbs visible",
+      defaultValue: 4,
+      defaultValueHint: 4
+    },
+    slideContainer: {
+      type: "slot",
+      defaultValue: {
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }]
+      }
+    },
+    thumbsContainer: {
+      type: "slot",
+      defaultValue: {
+        type: "hbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }]
+      }
+    },
+    slideSelected: {
+      type: "number",
+      defaultValue: 0,
+      defaultValueHint: 0,
+      description: "Current slide selected"
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductSlider"
+};
+function ProductSlider(props) {
+  var className = props.className,
+      slideContainer = props.slideContainer,
+      thumbsContainer = props.thumbsContainer,
+      _props$thumbsVisible = props.thumbsVisible,
+      thumbsVisible = _props$thumbsVisible === void 0 ? 4 : _props$thumbsVisible,
+      _props$slideSelected = props.slideSelected,
+      slideSelected = _props$slideSelected === void 0 ? 0 : _props$slideSelected;
+  var product = useProduct();
+
+  var _React$useState = React.useState(slideSelected),
+      selected = _React$useState[0],
+      setSelected = _React$useState[1];
+
+  var maximumRight = product.images.length - thumbsVisible;
+  var leftIndex = Math.min(maximumRight, Math.max(0, selected - 1));
+  return React.createElement("div", {
+    className: className
+  }, React.createElement(ProductSliderProvider, {
+    mediaIndex: selected,
+    children: slideContainer
+  }), React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
+    }
+  }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
+    return repeatedElement(i === 0, React.createElement(ProductSliderProvider, {
+      mediaIndex: leftIndex + i,
+      children: thumbsContainer,
+      onClick: function onClick() {
+        return setSelected(leftIndex + i);
+      }
+    }));
+  })));
+}
+function registerProductSlider(loader, customProductSliderMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(ProductSlider, customProductSliderMeta != null ? customProductSliderMeta : productSliderMeta);
+}
+
 var productTextFieldMeta = {
   name: "plasmic-commerce-product-text-field",
   displayName: "Product Text Field",
@@ -2288,14 +2468,14 @@ function ProductTextField(props) {
   var value;
 
   if (field === "description") {
-    return product.descriptionHtml ? React.createElement("div", {
+    var _product$descriptionH;
+
+    return React.createElement("div", {
       className: className,
       dangerouslySetInnerHTML: {
-        __html: product.descriptionHtml
+        __html: (_product$descriptionH = product.descriptionHtml) != null ? _product$descriptionH : product.description
       }
-    }) : React.createElement("div", {
-      className: className
-    }, product.description);
+    });
   } else {
     value = product[field];
   }
@@ -2395,7 +2575,10 @@ var product = {
   __proto__: null
 };
 
-
+/*
+  Forked from https://github.com/vercel/commerce/tree/main/packages/commerce/src
+  Changes: Added CategoryImage and depth/children/parent_id to Category
+*/
 
 var site = {
   __proto__: null
@@ -2411,11 +2594,13 @@ function registerAll(loader) {
   registerProductQuantity(loader);
   registerProductVariantPicker(loader);
   registerProductBox(loader);
+  registerProductSlider(loader);
   registerProductLink(loader);
   registerCategoryCollection(loader);
   registerCategoryField(loader);
   registerCategoryLink(loader);
+  registerCategoryMedia(loader);
 }
 
-export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CategoryLink, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
+export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CategoryLink, CategoryMedia, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductSlider, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, categoryMediaMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productSliderMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerCategoryMedia, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductSlider, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
 //# sourceMappingURL=commerce.esm.js.map