@tatan22/jcd-product-card 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 tatancarduar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# JCD-Product-Card
+
+Este es un paquete de pruebas de despliegue de NPM
+
+## Jhonatan Cardona Duarte
+
+## Ejemplos
+
+```tsx
+import { ProductCard , ProductImage, ProductTitle, ProductButtons} from 'jcd-product-card';
+ ```
+
+```tsx
+<ProductCard
+     product={product}
+     initialValues={{
+      count: 4,
+      maxCount: 10,
+     }}
+    >
+     {({ reset, count, increaseBy, isMaxCountReached }) => (
+      <>
+       <ProductCard.Image />
+       <ProductCard.Title />
+       <ProductCard.Buttons />
+        
+      </>
+     )}
+    </ProductCard>
+        ```

package/dist/components/ProductButtons.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface Props {
+    className?: string;
+    style?: React.CSSProperties;
+    activeBtnClass?: string;
+}
+export declare const ProductButtons: ({ className, style }: Props) => React.JSX.Element;

package/dist/components/ProductCard.d.ts

@@ -0,0 +1,17 @@
+import React, { JSX } from 'react';
+import { InitialValues, onChangeArgs, Product, ProductCardHandlers } from '../interfaces/interfaces';
+export interface Props {
+    product: Product;
+    children: (args: ProductCardHandlers) => JSX.Element;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (args: onChangeArgs) => void;
+    value?: number;
+    initialValues?: InitialValues;
+}
+export declare const ProductCard: {
+    ({ children, product, className, style, onChange, value, initialValues, }: Props): JSX.Element;
+    Image: ({ img, className, style }: import("./ProductImage").Props) => JSX.Element;
+    Title: ({ title, className, style }: import("./ProductTitle").Props) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    Buttons: ({ className, style }: import("./ProductButtons").Props) => JSX.Element;
+};

package/dist/components/ProductContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ProductContextProps } from "../interfaces/interfaces";
+export declare const ProductContext: import("react").Context<ProductContextProps>;

package/dist/components/ProductImage.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface Props {
+    img?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ProductImage: ({ img, className, style }: Props) => React.JSX.Element;

package/dist/components/ProductTitle.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactElement } from "react";
+export interface Props {
+    title?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ProductTitle: ({ title, className, style }: Props) => ReactElement;

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+import { ProductCardHOCProps } from '../interfaces/interfaces';
+export { ProductButtons } from './ProductButtons';
+export { ProductImage } from './ProductImage';
+export { ProductTitle } from './ProductTitle';
+export declare const ProductCard: ProductCardHOCProps;
+export default ProductCard;

package/dist/hooks/useProduct.d.ts

@@ -0,0 +1,15 @@
+import { InitialValues, onChangeArgs, Product } from "../interfaces/interfaces";
+interface useProductArgs {
+    product: Product;
+    onChange?: (args: onChangeArgs) => void;
+    value?: number;
+    initialValues?: InitialValues;
+}
+export declare const useProduct: ({ onChange, product, value, initialValues, }: useProductArgs) => {
+    counter: number;
+    maxCount: number | undefined;
+    increaseBy: (value?: number | undefined) => void;
+    isMaxCountReached: boolean;
+    reset: () => void;
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./jcd-product-card.cjs.production.min.js')
+} else {
+  module.exports = require('./jcd-product-card.cjs.development.js')
+}

package/dist/interfaces/interfaces.d.ts

@@ -0,0 +1,41 @@
+import { JSX, JSXElementConstructor, ReactElement } from 'react';
+import { Props as ProductCardProps } from '../components/ProductCard';
+import { Props as ProductTitleProps } from '../components/ProductTitle';
+import { Props as ProductImageProps } from '../components/ProductImage';
+import { Props as ProductButtonsProps } from '../components/ProductButtons';
+export interface Product {
+    id: string;
+    title: string;
+    img?: string;
+}
+export interface ProductContextProps {
+    counter: number;
+    maxCount?: number;
+    product: Product;
+    increaseBy: (value?: number) => void;
+}
+export interface ProductCardHOCProps {
+    ({ children, product }: ProductCardProps): JSX.Element;
+    Image: (Props: ProductImageProps) => JSX.Element;
+    Button: (Props: ProductButtonsProps) => JSX.Element;
+    Title: (Props: ProductTitleProps) => ReactElement<unknown, string | JSXElementConstructor<any>>;
+}
+export interface onChangeArgs {
+    product: Product;
+    count: number;
+}
+export interface ProductsInCart extends Product {
+    count: number;
+}
+export interface InitialValues {
+    count?: number;
+    maxCount?: number;
+}
+export interface ProductCardHandlers {
+    count: number;
+    isMaxCountReached: boolean;
+    maxCount?: number;
+    product: Product;
+    increaseBy: (value: number) => void;
+    reset: () => void;
+}

package/dist/jcd-product-card.cjs.development.js

@@ -0,0 +1,217 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
+var useProduct = function useProduct(_ref) {
+  var onChange = _ref.onChange,
+    product = _ref.product,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    initialValues = _ref.initialValues;
+  // if (initialValues) {
+  // 	value = initialValues.count || value;
+  // }
+  var _useState = React.useState((initialValues == null ? void 0 : initialValues.count) || value),
+    counter = _useState[0],
+    setCounter = _useState[1];
+  var isMounted = React.useRef(false);
+  var increaseBy = function increaseBy(value) {
+    var amount = value != null ? value : 1;
+    var newValue = Math.max(counter + amount, 0);
+    if (initialValues != null && initialValues.maxCount) {
+      newValue = Math.min(newValue, initialValues.maxCount);
+    }
+    setCounter(newValue);
+    onChange && onChange({
+      count: newValue,
+      product: product
+    });
+  };
+  var reset = function reset() {
+    var newValue = (initialValues == null ? void 0 : initialValues.count) || value;
+    setCounter(newValue);
+    onChange && onChange({
+      count: newValue,
+      product: product
+    });
+  };
+  // El use ref se puede usar como un elemento que no tiene dependencias de renderizado
+  React.useEffect(function () {
+    if (!isMounted.current) return;
+    setCounter(value);
+  }, [value]);
+  React.useEffect(function () {
+    isMounted.current = true;
+  }, []);
+  return {
+    //Props
+    counter: counter,
+    maxCount: initialValues == null ? void 0 : initialValues.maxCount,
+    //Methods
+    increaseBy: increaseBy,
+    isMaxCountReached: !!(initialValues != null && initialValues.maxCount) && counter === initialValues.maxCount,
+    reset: reset
+  };
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".styles-module_productCard__oaIVo {\n  background-color: #1e2025;\n  border-radius: 15px;\n  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);\n  color: white;\n  padding-bottom: 5px;\n  font-family: Arial, Helvetica, sans-serif;\n  width: 250px;\n  margin-right: 5px;\n  margin-top: 5px;\n}\n\n.styles-module_productImg__vPsTp {\n  border-radius: 15px 15px 0px 0px;\n  width: 100%;\n}\n\n.styles-module_productDescription__Ariub {\n  margin: 10px;\n}\n\n.styles-module_buttonsContainer__ghCDF {\n  margin: 10px;\n  display: flex;\n  flex-direction: row;\n}\n\n.styles-module_buttonMinus__BTgTf {\n  cursor: pointer;\n  background-color: transparent;\n  border: 1px solid white;\n  border-radius: 5px 0px 0px 5px;\n  color: white;\n  font-size: 20px;\n  width: 30px;\n}\n\n.styles-module_buttonMinus__BTgTf:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.styles-module_countLabel__S6HZ- {\n  border-bottom: 1px solid white;\n  border-top: 1px solid white;\n  color: white;\n  font-size: 16px;\n  height: 25px;\n  padding-top: 5px;\n  text-align: center;\n  width: 30px;\n}\n\n.styles-module_buttonAdd__s8wd6 {\n  cursor: pointer;\n  background-color: transparent;\n  border: 1px solid white;\n  border-radius: 0px 5px 5px 0px;\n  color: white;\n  font-size: 20px;\n  width: 30px;\n}\n\n.styles-module_buttonAdd__s8wd6:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.styles-module_disabled__k5aZm {\n  border-color: grey !important;\n  border-left: 1px solid white !important;\n  color: grey !important;\n}\n";
+var styles = {"productCard":"styles-module_productCard__oaIVo","productImg":"styles-module_productImg__vPsTp","productDescription":"styles-module_productDescription__Ariub","buttonsContainer":"styles-module_buttonsContainer__ghCDF","buttonMinus":"styles-module_buttonMinus__BTgTf","countLabel":"styles-module_countLabel__S6HZ-","buttonAdd":"styles-module_buttonAdd__s8wd6","disabled":"styles-module_disabled__k5aZm"};
+styleInject(css_248z);
+
+// ProductContext.tsx
+var ProductContext = /*#__PURE__*/React.createContext({});
+
+var DEFAULT_IMAGE = "https://via.placeholder.com/300x200?text=No+Image";
+var ProductImage = function ProductImage(_ref) {
+  var img = _ref.img,
+    className = _ref.className,
+    style = _ref.style;
+  var _useContext = React.useContext(ProductContext),
+    product = _useContext.product;
+  var imgToShow = "";
+  if (img) {
+    imgToShow = img;
+  } else if (product.img) {
+    imgToShow = product.img;
+  } else {
+    imgToShow = DEFAULT_IMAGE;
+  }
+  return React__default.createElement("img", {
+    className: "\t" + styles.productImg + " " + className,
+    src: imgToShow,
+    alt: "Product",
+    style: style
+  });
+};
+
+// export const ProductTitle = ({ title, className }: { title?: string, className?: string }): ReactElement => {
+var ProductTitle = function ProductTitle(_ref) {
+  var title = _ref.title,
+    className = _ref.className,
+    style = _ref.style;
+  var _useContext = React.useContext(ProductContext),
+    product = _useContext.product;
+  return React__default.createElement("span", {
+    className: styles.productTitle + " " + className,
+    style: style
+  }, title || product.title);
+};
+
+var ProductButtons = function ProductButtons(_ref) {
+  var className = _ref.className,
+    style = _ref.style;
+  var _useContext = React.useContext(ProductContext),
+    increaseBy = _useContext.increaseBy,
+    counter = _useContext.counter,
+    maxCount = _useContext.maxCount;
+  //TODO: Una función isMaxReached = useCallback, dependencias [counter, maxCounter]
+  //? True si el count === maxCount, caso contrario False
+  var isMaxReached = React.useCallback(function () {
+    return !!maxCount && counter === maxCount;
+  },
+  // retorna true o false
+  [counter, maxCount]);
+  return React__default.createElement("div", {
+    className: "\t" + styles.buttonsContainer + " " + className,
+    style: style
+  }, React__default.createElement("button", {
+    className: styles.buttonMinus,
+    onClick: function onClick() {
+      return increaseBy(-1);
+    }
+  }, "-"), React__default.createElement("div", {
+    className: styles.countLabel
+  }, counter), React__default.createElement("button", {
+    className: styles.buttonAdd + " " + (isMaxReached() && styles.disabled),
+    onClick: function onClick() {
+      return increaseBy(1);
+    }
+  }, "+"));
+};
+
+var Provider = ProductContext.Provider;
+var ProductCard = function ProductCard(_ref) {
+  var children = _ref.children,
+    product = _ref.product,
+    className = _ref.className,
+    style = _ref.style,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    initialValues = _ref.initialValues;
+  var _useProduct = useProduct({
+      onChange: onChange,
+      product: product,
+      value: value,
+      initialValues: initialValues
+    }),
+    counter = _useProduct.counter,
+    increaseBy = _useProduct.increaseBy,
+    isMaxCountReached = _useProduct.isMaxCountReached,
+    maxCount = _useProduct.maxCount,
+    reset = _useProduct.reset;
+  return React__default.createElement(Provider, {
+    value: {
+      counter: counter,
+      increaseBy: increaseBy,
+      maxCount: maxCount,
+      product: product
+    }
+  }, React__default.createElement("div", {
+    className: styles.productCard + " " + className,
+    style: style
+  }, children({
+    count: counter,
+    isMaxCountReached: isMaxCountReached,
+    maxCount: initialValues == null ? void 0 : initialValues.maxCount,
+    product: product,
+    increaseBy: increaseBy,
+    reset: reset
+  })));
+};
+ProductCard.Image = ProductImage;
+ProductCard.Title = ProductTitle;
+ProductCard.Buttons = ProductButtons;
+
+var ProductCard$1 = /*#__PURE__*/Object.assign(ProductCard, {
+  Button: ProductButtons,
+  Image: ProductImage,
+  Title: ProductTitle
+});
+
+exports.ProductButtons = ProductButtons;
+exports.ProductCard = ProductCard$1;
+exports.ProductImage = ProductImage;
+exports.ProductTitle = ProductTitle;
+//# sourceMappingURL=jcd-product-card.cjs.development.js.map

package/dist/jcd-product-card.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jcd-product-card.cjs.development.js","sources":["../src/hooks/useProduct.ts","../node_modules/style-inject/dist/style-inject.es.js","../src/components/ProductContext.tsx","../src/components/ProductImage.tsx","../src/components/ProductTitle.tsx","../src/components/ProductButtons.tsx","../src/components/ProductCard.tsx","../src/components/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\r\nimport { InitialValues, onChangeArgs, Product } from \"../interfaces/interfaces\";\r\n\r\ninterface useProductArgs {\r\n\tproduct: Product;\r\n\tonChange?: (args: onChangeArgs) => void;\r\n\tvalue?: number;\r\n\tinitialValues?: InitialValues;\r\n}\r\n\r\nexport const useProduct = ({\r\n\tonChange,\r\n\tproduct,\r\n\tvalue = 0,\r\n\tinitialValues,\r\n}: useProductArgs) => {\r\n\t// if (initialValues) {\r\n\t// \tvalue = initialValues.count || value;\r\n\t// }\r\n\r\n\tconst [counter, setCounter] = useState<number>(initialValues?.count || value);\r\n\r\n\tconst isMounted = useRef(false);\r\n\r\n\tconst increaseBy = (value?: number) => {\r\n\t\tconst amount = value ?? 1;\r\n\t\tlet newValue = Math.max(counter + amount, 0);\r\n\r\n\t\tif (initialValues?.maxCount) {\r\n\t\t\tnewValue = Math.min(newValue, initialValues.maxCount);\r\n\t\t}\r\n\r\n\t\tsetCounter(newValue);\r\n\r\n\t\tonChange && onChange({ count: newValue, product });\r\n\t};\r\n\r\n\tconst reset = () => {\r\n\t\tconst newValue = initialValues?.count || value;\r\n\t\tsetCounter(newValue);\r\n\t\tonChange && onChange({ count: newValue, product });\r\n\r\n\t}\r\n\r\n\t// El use ref se puede usar como un elemento que no tiene dependencias de renderizado\r\n\tuseEffect(() => {\r\n\t\tif (!isMounted.current) return;\r\n\t\tsetCounter(value);\r\n\t}, [value]);\r\n\r\n\tuseEffect(() => {\r\n\t\tisMounted.current = true;\r\n\t}, []);\r\n\r\n\treturn {\r\n\t\t//Props\r\n\t\tcounter,\r\n\t\tmaxCount: initialValues?.maxCount,\r\n\t\t//Methods\r\n\t\tincreaseBy,\r\n\t\tisMaxCountReached: !!initialValues?.maxCount && counter === initialValues.maxCount,\r\n\t\treset\r\n\t};\r\n};\r\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","// ProductContext.tsx\r\nimport { createContext } from \"react\";\r\nimport { ProductContextProps } from \"../interfaces/interfaces\";\r\n\r\nexport const ProductContext = createContext({} as ProductContextProps);","import React, { useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\n\r\n// import noImages from \"../assets/no-image.jpg\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\timg?: string;\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n}\r\nconst DEFAULT_IMAGE =\r\n  \"https://via.placeholder.com/300x200?text=No+Image\";\r\n\r\nexport const ProductImage = ({ img , className, style }: Props) => {\r\n\tconst { product } = useContext(ProductContext);\r\n\tlet imgToShow: string = \"\";\r\n\tif (img) {\r\n\t\timgToShow = img;\r\n\t} else if (product.img) {\r\n\t\timgToShow = product.img;\r\n\t} else {\r\n\t\timgToShow = DEFAULT_IMAGE;\r\n\t}\r\n\r\n\treturn <img className={`\t${styles.productImg} ${className}`} src={imgToShow} alt=\"Product\" style={style} />;\r\n};\r\n","import React, { ReactElement, useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\ttitle?: string;\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n}\r\n\r\n// export const ProductTitle = ({ title, className }: { title?: string, className?: string }): ReactElement => {\r\nexport const ProductTitle = ({ title, className, style }: Props): ReactElement => {\r\n\tconst { product } = useContext(ProductContext);\r\n\r\n\treturn (\r\n\t\t<span className={`${styles.productTitle} ${className}`} style={style}>\r\n\t\t\t{title || product.title}\r\n\t\t</span>\r\n\t);\r\n};\r\n\r\n\r\n","import React, { useCallback, useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\t// className para poder recibir estilos personalizados\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n\tactiveBtnClass?: string;\r\n}\r\n\r\nexport const ProductButtons = ({ className, style }: Props) => {\r\n\r\n\tconst { increaseBy, counter, maxCount } = useContext(ProductContext);\r\n\r\n//TODO: Una función isMaxReached = useCallback, dependencias [counter, maxCounter]\r\n//? True si el count === maxCount, caso contrario False\r\n\r\nconst isMaxReached = useCallback(\r\n\t() => !!maxCount && counter === maxCount, // retorna true o false\r\n\t[counter, maxCount],\r\n)\r\n\r\n\treturn (\r\n\t\t<div className={`\t${styles.buttonsContainer} ${className}`} style={style}>\r\n\t\t\t<button className={styles.buttonMinus} onClick={() => increaseBy(-1)}>\r\n\t\t\t\t-\r\n\t\t\t</button>\r\n\t\t\t<div className={styles.countLabel}>{counter}</div>\r\n\r\n\t\t\t<button className={`${styles.buttonAdd} ${ isMaxReached() && styles.disabled}`} onClick={() => increaseBy(1)}>\r\n\t\t\t\t+\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n};\r\n","import React, { JSX } from 'react';\r\nimport { useProduct } from '../hooks/useProduct';\r\nimport {\r\n  InitialValues,\r\n  onChangeArgs,\r\n  Product,\r\n  ProductCardHandlers,\r\n} from '../interfaces/interfaces';\r\nimport styles from '../styles/styles.module.css';\r\n\r\nimport { ProductImage } from './ProductImage';\r\nimport { ProductTitle } from './ProductTitle';\r\nimport { ProductButtons } from './ProductButtons';\r\nimport { ProductContext } from './ProductContext';\r\n\r\nconst { Provider } = ProductContext;\r\n\r\nexport interface Props {\r\n  product: Product;\r\n  // children?: ReactElement | ReactElement[];\r\n  children: (args: ProductCardHandlers) => JSX.Element;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n  onChange?: (args: onChangeArgs) => void;\r\n  value?: number;\r\n  initialValues?: InitialValues;\r\n}\r\n\r\nexport const ProductCard = ({\r\n  children,\r\n  product,\r\n  className,\r\n  style,\r\n  onChange,\r\n  value,\r\n  initialValues,\r\n}: Props) => {\r\n  const {\r\n    counter,\r\n    increaseBy,\r\n    isMaxCountReached,\r\n    maxCount,\r\n    reset,\r\n  } = useProduct({\r\n    onChange,\r\n    product,\r\n    value,\r\n    initialValues,\r\n  });\r\n\r\n  return (\r\n    <Provider value={{ counter, increaseBy, maxCount, product }}>\r\n      <div className={`${styles.productCard} ${className}`} style={style}>\r\n        {/* {children} */}\r\n        {children({\r\n          count: counter,\r\n          isMaxCountReached,\r\n          maxCount: initialValues?.maxCount,\r\n          product,\r\n          increaseBy,\r\n          reset,\r\n        })}\r\n      </div>\r\n    </Provider>\r\n  );\r\n};\r\n\r\nProductCard.Image = ProductImage;\r\nProductCard.Title = ProductTitle;\r\nProductCard.Buttons = ProductButtons;\r\n","import { ProductCard as ProductCardHOC } from './ProductCard';\r\nimport { ProductCardHOCProps } from '../interfaces/interfaces';\r\nimport { ProductButtons } from './ProductButtons';\r\nimport { ProductImage } from './ProductImage';\r\nimport { ProductTitle } from './ProductTitle';\r\nexport { ProductButtons } from './ProductButtons';\r\nexport { ProductImage } from './ProductImage';\r\nexport { ProductTitle } from './ProductTitle';\r\n\r\nexport const ProductCard: ProductCardHOCProps = Object.assign(ProductCardHOC, {\r\n  Button: ProductButtons,\r\n  Image: ProductImage,\r\n  Title: ProductTitle,\r\n});\r\n\r\nexport default ProductCard;"],"names":["useProduct","_ref","onChange","product","_ref$value","value","initialValues","_useState","useState","count","counter","setCounter","isMounted","useRef","increaseBy","amount","newValue","Math","max","maxCount","min","reset","useEffect","current","isMaxCountReached","ProductContext","createContext","DEFAULT_IMAGE","ProductImage","img","className","style","_useContext","useContext","imgToShow","React","styles","productImg","src","alt","ProductTitle","title","productTitle","ProductButtons","isMaxReached","useCallback","buttonsContainer","buttonMinus","onClick","countLabel","buttonAdd","disabled","Provider","ProductCard","children","_useProduct","productCard","Image","Title","Buttons","Object","assign","ProductCardHOC","Button"],"mappings":"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"}

package/dist/jcd-product-card.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),n=(t=e)&&"object"==typeof t&&"default"in t?t.default:t,o={productCard:"styles-module_productCard__oaIVo",productImg:"styles-module_productImg__vPsTp",productDescription:"styles-module_productDescription__Ariub",buttonsContainer:"styles-module_buttonsContainer__ghCDF",buttonMinus:"styles-module_buttonMinus__BTgTf",countLabel:"styles-module_countLabel__S6HZ-",buttonAdd:"styles-module_buttonAdd__s8wd6",disabled:"styles-module_disabled__k5aZm"};!function(t,e){void 0===e&&(e={});var n=e.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}(".styles-module_productCard__oaIVo {\n  background-color: #1e2025;\n  border-radius: 15px;\n  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);\n  color: white;\n  padding-bottom: 5px;\n  font-family: Arial, Helvetica, sans-serif;\n  width: 250px;\n  margin-right: 5px;\n  margin-top: 5px;\n}\n\n.styles-module_productImg__vPsTp {\n  border-radius: 15px 15px 0px 0px;\n  width: 100%;\n}\n\n.styles-module_productDescription__Ariub {\n  margin: 10px;\n}\n\n.styles-module_buttonsContainer__ghCDF {\n  margin: 10px;\n  display: flex;\n  flex-direction: row;\n}\n\n.styles-module_buttonMinus__BTgTf {\n  cursor: pointer;\n  background-color: transparent;\n  border: 1px solid white;\n  border-radius: 5px 0px 0px 5px;\n  color: white;\n  font-size: 20px;\n  width: 30px;\n}\n\n.styles-module_buttonMinus__BTgTf:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.styles-module_countLabel__S6HZ- {\n  border-bottom: 1px solid white;\n  border-top: 1px solid white;\n  color: white;\n  font-size: 16px;\n  height: 25px;\n  padding-top: 5px;\n  text-align: center;\n  width: 30px;\n}\n\n.styles-module_buttonAdd__s8wd6 {\n  cursor: pointer;\n  background-color: transparent;\n  border: 1px solid white;\n  border-radius: 0px 5px 5px 0px;\n  color: white;\n  font-size: 20px;\n  width: 30px;\n}\n\n.styles-module_buttonAdd__s8wd6:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.styles-module_disabled__k5aZm {\n  border-color: grey !important;\n  border-left: 1px solid white !important;\n  color: grey !important;\n}\n");var r=e.createContext({}),u=function(t){var u=t.img,a=t.className,s=t.style,l=e.useContext(r).product;return n.createElement("img",{className:"\t"+o.productImg+" "+a,src:u||(l.img?l.img:"https://via.placeholder.com/300x200?text=No+Image"),alt:"Product",style:s})},a=function(t){var u=t.title,a=t.className,s=t.style,l=e.useContext(r);return n.createElement("span",{className:o.productTitle+" "+a,style:s},u||l.product.title)},s=function(t){var u=t.className,a=t.style,s=e.useContext(r),l=s.increaseBy,d=s.counter,i=s.maxCount,c=e.useCallback((function(){return!!i&&d===i}),[d,i]);return n.createElement("div",{className:"\t"+o.buttonsContainer+" "+u,style:a},n.createElement("button",{className:o.buttonMinus,onClick:function(){return l(-1)}},"-"),n.createElement("div",{className:o.countLabel},d),n.createElement("button",{className:o.buttonAdd+" "+(c()&&o.disabled),onClick:function(){return l(1)}},"+"))},l=r.Provider,d=function(t){var r=t.children,u=t.product,a=t.className,s=t.style,d=t.initialValues,i=function(t){var n=t.onChange,o=t.product,r=t.value,u=void 0===r?0:r,a=t.initialValues,s=e.useState((null==a?void 0:a.count)||u),l=s[0],d=s[1],i=e.useRef(!1);return e.useEffect((function(){i.current&&d(u)}),[u]),e.useEffect((function(){i.current=!0}),[]),{counter:l,maxCount:null==a?void 0:a.maxCount,increaseBy:function(t){var e=Math.max(l+(null!=t?t:1),0);null!=a&&a.maxCount&&(e=Math.min(e,a.maxCount)),d(e),n&&n({count:e,product:o})},isMaxCountReached:!(null==a||!a.maxCount)&&l===a.maxCount,reset:function(){var t=(null==a?void 0:a.count)||u;d(t),n&&n({count:t,product:o})}}}({onChange:t.onChange,product:u,value:t.value,initialValues:d}),c=i.counter,p=i.increaseBy;return n.createElement(l,{value:{counter:c,increaseBy:p,maxCount:i.maxCount,product:u}},n.createElement("div",{className:o.productCard+" "+a,style:s},r({count:c,isMaxCountReached:i.isMaxCountReached,maxCount:null==d?void 0:d.maxCount,product:u,increaseBy:p,reset:i.reset})))};d.Image=u,d.Title=a,d.Buttons=s;var i=Object.assign(d,{Button:s,Image:u,Title:a});exports.ProductButtons=s,exports.ProductCard=i,exports.ProductImage=u,exports.ProductTitle=a;
+//# sourceMappingURL=jcd-product-card.cjs.production.min.js.map

package/dist/jcd-product-card.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jcd-product-card.cjs.production.min.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/ProductContext.tsx","../src/components/ProductImage.tsx","../src/components/ProductTitle.tsx","../src/components/ProductButtons.tsx","../src/components/ProductCard.tsx","../src/hooks/useProduct.ts","../src/components/index.ts"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","// ProductContext.tsx\r\nimport { createContext } from \"react\";\r\nimport { ProductContextProps } from \"../interfaces/interfaces\";\r\n\r\nexport const ProductContext = createContext({} as ProductContextProps);","import React, { useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\n\r\n// import noImages from \"../assets/no-image.jpg\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\timg?: string;\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n}\r\nconst DEFAULT_IMAGE =\r\n  \"https://via.placeholder.com/300x200?text=No+Image\";\r\n\r\nexport const ProductImage = ({ img , className, style }: Props) => {\r\n\tconst { product } = useContext(ProductContext);\r\n\tlet imgToShow: string = \"\";\r\n\tif (img) {\r\n\t\timgToShow = img;\r\n\t} else if (product.img) {\r\n\t\timgToShow = product.img;\r\n\t} else {\r\n\t\timgToShow = DEFAULT_IMAGE;\r\n\t}\r\n\r\n\treturn <img className={`\t${styles.productImg} ${className}`} src={imgToShow} alt=\"Product\" style={style} />;\r\n};\r\n","import React, { ReactElement, useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\ttitle?: string;\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n}\r\n\r\n// export const ProductTitle = ({ title, className }: { title?: string, className?: string }): ReactElement => {\r\nexport const ProductTitle = ({ title, className, style }: Props): ReactElement => {\r\n\tconst { product } = useContext(ProductContext);\r\n\r\n\treturn (\r\n\t\t<span className={`${styles.productTitle} ${className}`} style={style}>\r\n\t\t\t{title || product.title}\r\n\t\t</span>\r\n\t);\r\n};\r\n\r\n\r\n","import React, { useCallback, useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\t// className para poder recibir estilos personalizados\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n\tactiveBtnClass?: string;\r\n}\r\n\r\nexport const ProductButtons = ({ className, style }: Props) => {\r\n\r\n\tconst { increaseBy, counter, maxCount } = useContext(ProductContext);\r\n\r\n//TODO: Una función isMaxReached = useCallback, dependencias [counter, maxCounter]\r\n//? True si el count === maxCount, caso contrario False\r\n\r\nconst isMaxReached = useCallback(\r\n\t() => !!maxCount && counter === maxCount, // retorna true o false\r\n\t[counter, maxCount],\r\n)\r\n\r\n\treturn (\r\n\t\t<div className={`\t${styles.buttonsContainer} ${className}`} style={style}>\r\n\t\t\t<button className={styles.buttonMinus} onClick={() => increaseBy(-1)}>\r\n\t\t\t\t-\r\n\t\t\t</button>\r\n\t\t\t<div className={styles.countLabel}>{counter}</div>\r\n\r\n\t\t\t<button className={`${styles.buttonAdd} ${ isMaxReached() && styles.disabled}`} onClick={() => increaseBy(1)}>\r\n\t\t\t\t+\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n};\r\n","import React, { JSX } from 'react';\r\nimport { useProduct } from '../hooks/useProduct';\r\nimport {\r\n  InitialValues,\r\n  onChangeArgs,\r\n  Product,\r\n  ProductCardHandlers,\r\n} from '../interfaces/interfaces';\r\nimport styles from '../styles/styles.module.css';\r\n\r\nimport { ProductImage } from './ProductImage';\r\nimport { ProductTitle } from './ProductTitle';\r\nimport { ProductButtons } from './ProductButtons';\r\nimport { ProductContext } from './ProductContext';\r\n\r\nconst { Provider } = ProductContext;\r\n\r\nexport interface Props {\r\n  product: Product;\r\n  // children?: ReactElement | ReactElement[];\r\n  children: (args: ProductCardHandlers) => JSX.Element;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n  onChange?: (args: onChangeArgs) => void;\r\n  value?: number;\r\n  initialValues?: InitialValues;\r\n}\r\n\r\nexport const ProductCard = ({\r\n  children,\r\n  product,\r\n  className,\r\n  style,\r\n  onChange,\r\n  value,\r\n  initialValues,\r\n}: Props) => {\r\n  const {\r\n    counter,\r\n    increaseBy,\r\n    isMaxCountReached,\r\n    maxCount,\r\n    reset,\r\n  } = useProduct({\r\n    onChange,\r\n    product,\r\n    value,\r\n    initialValues,\r\n  });\r\n\r\n  return (\r\n    <Provider value={{ counter, increaseBy, maxCount, product }}>\r\n      <div className={`${styles.productCard} ${className}`} style={style}>\r\n        {/* {children} */}\r\n        {children({\r\n          count: counter,\r\n          isMaxCountReached,\r\n          maxCount: initialValues?.maxCount,\r\n          product,\r\n          increaseBy,\r\n          reset,\r\n        })}\r\n      </div>\r\n    </Provider>\r\n  );\r\n};\r\n\r\nProductCard.Image = ProductImage;\r\nProductCard.Title = ProductTitle;\r\nProductCard.Buttons = ProductButtons;\r\n","import { useEffect, useRef, useState } from \"react\";\r\nimport { InitialValues, onChangeArgs, Product } from \"../interfaces/interfaces\";\r\n\r\ninterface useProductArgs {\r\n\tproduct: Product;\r\n\tonChange?: (args: onChangeArgs) => void;\r\n\tvalue?: number;\r\n\tinitialValues?: InitialValues;\r\n}\r\n\r\nexport const useProduct = ({\r\n\tonChange,\r\n\tproduct,\r\n\tvalue = 0,\r\n\tinitialValues,\r\n}: useProductArgs) => {\r\n\t// if (initialValues) {\r\n\t// \tvalue = initialValues.count || value;\r\n\t// }\r\n\r\n\tconst [counter, setCounter] = useState<number>(initialValues?.count || value);\r\n\r\n\tconst isMounted = useRef(false);\r\n\r\n\tconst increaseBy = (value?: number) => {\r\n\t\tconst amount = value ?? 1;\r\n\t\tlet newValue = Math.max(counter + amount, 0);\r\n\r\n\t\tif (initialValues?.maxCount) {\r\n\t\t\tnewValue = Math.min(newValue, initialValues.maxCount);\r\n\t\t}\r\n\r\n\t\tsetCounter(newValue);\r\n\r\n\t\tonChange && onChange({ count: newValue, product });\r\n\t};\r\n\r\n\tconst reset = () => {\r\n\t\tconst newValue = initialValues?.count || value;\r\n\t\tsetCounter(newValue);\r\n\t\tonChange && onChange({ count: newValue, product });\r\n\r\n\t}\r\n\r\n\t// El use ref se puede usar como un elemento que no tiene dependencias de renderizado\r\n\tuseEffect(() => {\r\n\t\tif (!isMounted.current) return;\r\n\t\tsetCounter(value);\r\n\t}, [value]);\r\n\r\n\tuseEffect(() => {\r\n\t\tisMounted.current = true;\r\n\t}, []);\r\n\r\n\treturn {\r\n\t\t//Props\r\n\t\tcounter,\r\n\t\tmaxCount: initialValues?.maxCount,\r\n\t\t//Methods\r\n\t\tincreaseBy,\r\n\t\tisMaxCountReached: !!initialValues?.maxCount && counter === initialValues.maxCount,\r\n\t\treset\r\n\t};\r\n};\r\n","import { ProductCard as ProductCardHOC } from './ProductCard';\r\nimport { ProductCardHOCProps } from '../interfaces/interfaces';\r\nimport { ProductButtons } from './ProductButtons';\r\nimport { ProductImage } from './ProductImage';\r\nimport { ProductTitle } from './ProductTitle';\r\nexport { ProductButtons } from './ProductButtons';\r\nexport { ProductImage } from './ProductImage';\r\nexport { ProductTitle } from './ProductTitle';\r\n\r\nexport const ProductCard: ProductCardHOCProps = Object.assign(ProductCardHOC, {\r\n  Button: ProductButtons,\r\n  Image: ProductImage,\r\n  Title: ProductTitle,\r\n});\r\n\r\nexport default ProductCard;"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","ProductContext","createContext","ProductImage","_ref","img","className","product","useContext","React","styles","productImg","src","alt","ProductTitle","title","_useContext","productTitle","ProductButtons","increaseBy","counter","maxCount","isMaxReached","useCallback","buttonsContainer","buttonMinus","onClick","countLabel","buttonAdd","disabled","Provider","ProductCard","children","initialValues","_useProduct","onChange","_ref$value","value","_useState","useState","count","setCounter","isMounted","useRef","useEffect","current","newValue","Math","max","min","isMaxCountReached","reset","useProduct","productCard","Image","Title","Buttons","Object","assign","ProductCardHOC","Button"],"mappings":"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"}

package/dist/jcd-product-card.esm.js

@@ -0,0 +1,207 @@
+import React, { useState, useRef, useEffect, createContext, useContext, useCallback } from 'react';
+
+var useProduct = function useProduct(_ref) {
+  var onChange = _ref.onChange,
+    product = _ref.product,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    initialValues = _ref.initialValues;
+  // if (initialValues) {
+  // 	value = initialValues.count || value;
+  // }
+  var _useState = useState((initialValues == null ? void 0 : initialValues.count) || value),
+    counter = _useState[0],
+    setCounter = _useState[1];
+  var isMounted = useRef(false);
+  var increaseBy = function increaseBy(value) {
+    var amount = value != null ? value : 1;
+    var newValue = Math.max(counter + amount, 0);
+    if (initialValues != null && initialValues.maxCount) {
+      newValue = Math.min(newValue, initialValues.maxCount);
+    }
+    setCounter(newValue);
+    onChange && onChange({
+      count: newValue,
+      product: product
+    });
+  };
+  var reset = function reset() {
+    var newValue = (initialValues == null ? void 0 : initialValues.count) || value;
+    setCounter(newValue);
+    onChange && onChange({
+      count: newValue,
+      product: product
+    });
+  };
+  // El use ref se puede usar como un elemento que no tiene dependencias de renderizado
+  useEffect(function () {
+    if (!isMounted.current) return;
+    setCounter(value);
+  }, [value]);
+  useEffect(function () {
+    isMounted.current = true;
+  }, []);
+  return {
+    //Props
+    counter: counter,
+    maxCount: initialValues == null ? void 0 : initialValues.maxCount,
+    //Methods
+    increaseBy: increaseBy,
+    isMaxCountReached: !!(initialValues != null && initialValues.maxCount) && counter === initialValues.maxCount,
+    reset: reset
+  };
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".styles-module_productCard__oaIVo {\n  background-color: #1e2025;\n  border-radius: 15px;\n  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);\n  color: white;\n  padding-bottom: 5px;\n  font-family: Arial, Helvetica, sans-serif;\n  width: 250px;\n  margin-right: 5px;\n  margin-top: 5px;\n}\n\n.styles-module_productImg__vPsTp {\n  border-radius: 15px 15px 0px 0px;\n  width: 100%;\n}\n\n.styles-module_productDescription__Ariub {\n  margin: 10px;\n}\n\n.styles-module_buttonsContainer__ghCDF {\n  margin: 10px;\n  display: flex;\n  flex-direction: row;\n}\n\n.styles-module_buttonMinus__BTgTf {\n  cursor: pointer;\n  background-color: transparent;\n  border: 1px solid white;\n  border-radius: 5px 0px 0px 5px;\n  color: white;\n  font-size: 20px;\n  width: 30px;\n}\n\n.styles-module_buttonMinus__BTgTf:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.styles-module_countLabel__S6HZ- {\n  border-bottom: 1px solid white;\n  border-top: 1px solid white;\n  color: white;\n  font-size: 16px;\n  height: 25px;\n  padding-top: 5px;\n  text-align: center;\n  width: 30px;\n}\n\n.styles-module_buttonAdd__s8wd6 {\n  cursor: pointer;\n  background-color: transparent;\n  border: 1px solid white;\n  border-radius: 0px 5px 5px 0px;\n  color: white;\n  font-size: 20px;\n  width: 30px;\n}\n\n.styles-module_buttonAdd__s8wd6:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.styles-module_disabled__k5aZm {\n  border-color: grey !important;\n  border-left: 1px solid white !important;\n  color: grey !important;\n}\n";
+var styles = {"productCard":"styles-module_productCard__oaIVo","productImg":"styles-module_productImg__vPsTp","productDescription":"styles-module_productDescription__Ariub","buttonsContainer":"styles-module_buttonsContainer__ghCDF","buttonMinus":"styles-module_buttonMinus__BTgTf","countLabel":"styles-module_countLabel__S6HZ-","buttonAdd":"styles-module_buttonAdd__s8wd6","disabled":"styles-module_disabled__k5aZm"};
+styleInject(css_248z);
+
+// ProductContext.tsx
+var ProductContext = /*#__PURE__*/createContext({});
+
+var DEFAULT_IMAGE = "https://via.placeholder.com/300x200?text=No+Image";
+var ProductImage = function ProductImage(_ref) {
+  var img = _ref.img,
+    className = _ref.className,
+    style = _ref.style;
+  var _useContext = useContext(ProductContext),
+    product = _useContext.product;
+  var imgToShow = "";
+  if (img) {
+    imgToShow = img;
+  } else if (product.img) {
+    imgToShow = product.img;
+  } else {
+    imgToShow = DEFAULT_IMAGE;
+  }
+  return React.createElement("img", {
+    className: "\t" + styles.productImg + " " + className,
+    src: imgToShow,
+    alt: "Product",
+    style: style
+  });
+};
+
+// export const ProductTitle = ({ title, className }: { title?: string, className?: string }): ReactElement => {
+var ProductTitle = function ProductTitle(_ref) {
+  var title = _ref.title,
+    className = _ref.className,
+    style = _ref.style;
+  var _useContext = useContext(ProductContext),
+    product = _useContext.product;
+  return React.createElement("span", {
+    className: styles.productTitle + " " + className,
+    style: style
+  }, title || product.title);
+};
+
+var ProductButtons = function ProductButtons(_ref) {
+  var className = _ref.className,
+    style = _ref.style;
+  var _useContext = useContext(ProductContext),
+    increaseBy = _useContext.increaseBy,
+    counter = _useContext.counter,
+    maxCount = _useContext.maxCount;
+  //TODO: Una función isMaxReached = useCallback, dependencias [counter, maxCounter]
+  //? True si el count === maxCount, caso contrario False
+  var isMaxReached = useCallback(function () {
+    return !!maxCount && counter === maxCount;
+  },
+  // retorna true o false
+  [counter, maxCount]);
+  return React.createElement("div", {
+    className: "\t" + styles.buttonsContainer + " " + className,
+    style: style
+  }, React.createElement("button", {
+    className: styles.buttonMinus,
+    onClick: function onClick() {
+      return increaseBy(-1);
+    }
+  }, "-"), React.createElement("div", {
+    className: styles.countLabel
+  }, counter), React.createElement("button", {
+    className: styles.buttonAdd + " " + (isMaxReached() && styles.disabled),
+    onClick: function onClick() {
+      return increaseBy(1);
+    }
+  }, "+"));
+};
+
+var Provider = ProductContext.Provider;
+var ProductCard = function ProductCard(_ref) {
+  var children = _ref.children,
+    product = _ref.product,
+    className = _ref.className,
+    style = _ref.style,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    initialValues = _ref.initialValues;
+  var _useProduct = useProduct({
+      onChange: onChange,
+      product: product,
+      value: value,
+      initialValues: initialValues
+    }),
+    counter = _useProduct.counter,
+    increaseBy = _useProduct.increaseBy,
+    isMaxCountReached = _useProduct.isMaxCountReached,
+    maxCount = _useProduct.maxCount,
+    reset = _useProduct.reset;
+  return React.createElement(Provider, {
+    value: {
+      counter: counter,
+      increaseBy: increaseBy,
+      maxCount: maxCount,
+      product: product
+    }
+  }, React.createElement("div", {
+    className: styles.productCard + " " + className,
+    style: style
+  }, children({
+    count: counter,
+    isMaxCountReached: isMaxCountReached,
+    maxCount: initialValues == null ? void 0 : initialValues.maxCount,
+    product: product,
+    increaseBy: increaseBy,
+    reset: reset
+  })));
+};
+ProductCard.Image = ProductImage;
+ProductCard.Title = ProductTitle;
+ProductCard.Buttons = ProductButtons;
+
+var ProductCard$1 = /*#__PURE__*/Object.assign(ProductCard, {
+  Button: ProductButtons,
+  Image: ProductImage,
+  Title: ProductTitle
+});
+
+export { ProductButtons, ProductCard$1 as ProductCard, ProductImage, ProductTitle };
+//# sourceMappingURL=jcd-product-card.esm.js.map

package/dist/jcd-product-card.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jcd-product-card.esm.js","sources":["../src/hooks/useProduct.ts","../node_modules/style-inject/dist/style-inject.es.js","../src/components/ProductContext.tsx","../src/components/ProductImage.tsx","../src/components/ProductTitle.tsx","../src/components/ProductButtons.tsx","../src/components/ProductCard.tsx","../src/components/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\r\nimport { InitialValues, onChangeArgs, Product } from \"../interfaces/interfaces\";\r\n\r\ninterface useProductArgs {\r\n\tproduct: Product;\r\n\tonChange?: (args: onChangeArgs) => void;\r\n\tvalue?: number;\r\n\tinitialValues?: InitialValues;\r\n}\r\n\r\nexport const useProduct = ({\r\n\tonChange,\r\n\tproduct,\r\n\tvalue = 0,\r\n\tinitialValues,\r\n}: useProductArgs) => {\r\n\t// if (initialValues) {\r\n\t// \tvalue = initialValues.count || value;\r\n\t// }\r\n\r\n\tconst [counter, setCounter] = useState<number>(initialValues?.count || value);\r\n\r\n\tconst isMounted = useRef(false);\r\n\r\n\tconst increaseBy = (value?: number) => {\r\n\t\tconst amount = value ?? 1;\r\n\t\tlet newValue = Math.max(counter + amount, 0);\r\n\r\n\t\tif (initialValues?.maxCount) {\r\n\t\t\tnewValue = Math.min(newValue, initialValues.maxCount);\r\n\t\t}\r\n\r\n\t\tsetCounter(newValue);\r\n\r\n\t\tonChange && onChange({ count: newValue, product });\r\n\t};\r\n\r\n\tconst reset = () => {\r\n\t\tconst newValue = initialValues?.count || value;\r\n\t\tsetCounter(newValue);\r\n\t\tonChange && onChange({ count: newValue, product });\r\n\r\n\t}\r\n\r\n\t// El use ref se puede usar como un elemento que no tiene dependencias de renderizado\r\n\tuseEffect(() => {\r\n\t\tif (!isMounted.current) return;\r\n\t\tsetCounter(value);\r\n\t}, [value]);\r\n\r\n\tuseEffect(() => {\r\n\t\tisMounted.current = true;\r\n\t}, []);\r\n\r\n\treturn {\r\n\t\t//Props\r\n\t\tcounter,\r\n\t\tmaxCount: initialValues?.maxCount,\r\n\t\t//Methods\r\n\t\tincreaseBy,\r\n\t\tisMaxCountReached: !!initialValues?.maxCount && counter === initialValues.maxCount,\r\n\t\treset\r\n\t};\r\n};\r\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","// ProductContext.tsx\r\nimport { createContext } from \"react\";\r\nimport { ProductContextProps } from \"../interfaces/interfaces\";\r\n\r\nexport const ProductContext = createContext({} as ProductContextProps);","import React, { useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\n\r\n// import noImages from \"../assets/no-image.jpg\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\timg?: string;\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n}\r\nconst DEFAULT_IMAGE =\r\n  \"https://via.placeholder.com/300x200?text=No+Image\";\r\n\r\nexport const ProductImage = ({ img , className, style }: Props) => {\r\n\tconst { product } = useContext(ProductContext);\r\n\tlet imgToShow: string = \"\";\r\n\tif (img) {\r\n\t\timgToShow = img;\r\n\t} else if (product.img) {\r\n\t\timgToShow = product.img;\r\n\t} else {\r\n\t\timgToShow = DEFAULT_IMAGE;\r\n\t}\r\n\r\n\treturn <img className={`\t${styles.productImg} ${className}`} src={imgToShow} alt=\"Product\" style={style} />;\r\n};\r\n","import React, { ReactElement, useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\ttitle?: string;\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n}\r\n\r\n// export const ProductTitle = ({ title, className }: { title?: string, className?: string }): ReactElement => {\r\nexport const ProductTitle = ({ title, className, style }: Props): ReactElement => {\r\n\tconst { product } = useContext(ProductContext);\r\n\r\n\treturn (\r\n\t\t<span className={`${styles.productTitle} ${className}`} style={style}>\r\n\t\t\t{title || product.title}\r\n\t\t</span>\r\n\t);\r\n};\r\n\r\n\r\n","import React, { useCallback, useContext } from \"react\";\r\nimport styles from \"../styles/styles.module.css\";\r\nimport { ProductContext } from \"./ProductContext\";\r\n\r\nexport interface Props {\r\n\t// className para poder recibir estilos personalizados\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n\tactiveBtnClass?: string;\r\n}\r\n\r\nexport const ProductButtons = ({ className, style }: Props) => {\r\n\r\n\tconst { increaseBy, counter, maxCount } = useContext(ProductContext);\r\n\r\n//TODO: Una función isMaxReached = useCallback, dependencias [counter, maxCounter]\r\n//? True si el count === maxCount, caso contrario False\r\n\r\nconst isMaxReached = useCallback(\r\n\t() => !!maxCount && counter === maxCount, // retorna true o false\r\n\t[counter, maxCount],\r\n)\r\n\r\n\treturn (\r\n\t\t<div className={`\t${styles.buttonsContainer} ${className}`} style={style}>\r\n\t\t\t<button className={styles.buttonMinus} onClick={() => increaseBy(-1)}>\r\n\t\t\t\t-\r\n\t\t\t</button>\r\n\t\t\t<div className={styles.countLabel}>{counter}</div>\r\n\r\n\t\t\t<button className={`${styles.buttonAdd} ${ isMaxReached() && styles.disabled}`} onClick={() => increaseBy(1)}>\r\n\t\t\t\t+\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n};\r\n","import React, { JSX } from 'react';\r\nimport { useProduct } from '../hooks/useProduct';\r\nimport {\r\n  InitialValues,\r\n  onChangeArgs,\r\n  Product,\r\n  ProductCardHandlers,\r\n} from '../interfaces/interfaces';\r\nimport styles from '../styles/styles.module.css';\r\n\r\nimport { ProductImage } from './ProductImage';\r\nimport { ProductTitle } from './ProductTitle';\r\nimport { ProductButtons } from './ProductButtons';\r\nimport { ProductContext } from './ProductContext';\r\n\r\nconst { Provider } = ProductContext;\r\n\r\nexport interface Props {\r\n  product: Product;\r\n  // children?: ReactElement | ReactElement[];\r\n  children: (args: ProductCardHandlers) => JSX.Element;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n  onChange?: (args: onChangeArgs) => void;\r\n  value?: number;\r\n  initialValues?: InitialValues;\r\n}\r\n\r\nexport const ProductCard = ({\r\n  children,\r\n  product,\r\n  className,\r\n  style,\r\n  onChange,\r\n  value,\r\n  initialValues,\r\n}: Props) => {\r\n  const {\r\n    counter,\r\n    increaseBy,\r\n    isMaxCountReached,\r\n    maxCount,\r\n    reset,\r\n  } = useProduct({\r\n    onChange,\r\n    product,\r\n    value,\r\n    initialValues,\r\n  });\r\n\r\n  return (\r\n    <Provider value={{ counter, increaseBy, maxCount, product }}>\r\n      <div className={`${styles.productCard} ${className}`} style={style}>\r\n        {/* {children} */}\r\n        {children({\r\n          count: counter,\r\n          isMaxCountReached,\r\n          maxCount: initialValues?.maxCount,\r\n          product,\r\n          increaseBy,\r\n          reset,\r\n        })}\r\n      </div>\r\n    </Provider>\r\n  );\r\n};\r\n\r\nProductCard.Image = ProductImage;\r\nProductCard.Title = ProductTitle;\r\nProductCard.Buttons = ProductButtons;\r\n","import { ProductCard as ProductCardHOC } from './ProductCard';\r\nimport { ProductCardHOCProps } from '../interfaces/interfaces';\r\nimport { ProductButtons } from './ProductButtons';\r\nimport { ProductImage } from './ProductImage';\r\nimport { ProductTitle } from './ProductTitle';\r\nexport { ProductButtons } from './ProductButtons';\r\nexport { ProductImage } from './ProductImage';\r\nexport { ProductTitle } from './ProductTitle';\r\n\r\nexport const ProductCard: ProductCardHOCProps = Object.assign(ProductCardHOC, {\r\n  Button: ProductButtons,\r\n  Image: ProductImage,\r\n  Title: ProductTitle,\r\n});\r\n\r\nexport default ProductCard;"],"names":["useProduct","_ref","onChange","product","_ref$value","value","initialValues","_useState","useState","count","counter","setCounter","isMounted","useRef","increaseBy","amount","newValue","Math","max","maxCount","min","reset","useEffect","current","isMaxCountReached","ProductContext","createContext","DEFAULT_IMAGE","ProductImage","img","className","style","_useContext","useContext","imgToShow","React","styles","productImg","src","alt","ProductTitle","title","productTitle","ProductButtons","isMaxReached","useCallback","buttonsContainer","buttonMinus","onClick","countLabel","buttonAdd","disabled","Provider","ProductCard","children","_useProduct","productCard","Image","Title","Buttons","Object","assign","ProductCardHOC","Button"],"mappings":"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"}

package/package.json

@@ -0,0 +1,95 @@
+{
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "url": "https://github.com/tatan22/jcd-product-card",
+    "type": "git"
+  },
+  "homepage": "https://www.youtube.com/@tatancarduar",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test --watch --no-cache",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "@tatan22/jcd-product-card",
+  "author": "Jhonatan Cardona",
+  "module": "dist/do-product-card.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/do-product-card.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/do-product-card.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.6",
+    "@babel/preset-react": "^7.28.5",
+    "@rollup/plugin-image": "^2.1.1",
+    "@size-limit/preset-small-lib": "^5.0.5",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-test-renderer": "^19.1.0",
+    "babel-jest": "^30.2.0",
+    "husky": "^7.0.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-test-renderer": "^19.2.3",
+    "rollup-plugin-images": "^1.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^5.0.5",
+    "ts-jest": "^29.4.6",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.3"
+  },
+  "keywords": [
+    "product",
+    "card",
+    "tatancarduar",
+    "Jhonatan",
+    "Cardona"
+  ],
+  "dependencies": {},
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    }
+  }
+}

package/src/components/ProductButtons.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback, useContext } from "react";
+import styles from "../styles/styles.module.css";
+import { ProductContext } from "./ProductContext";
+
+export interface Props {
+	// className para poder recibir estilos personalizados
+	className?: string;
+	style?: React.CSSProperties;
+	activeBtnClass?: string;
+}
+
+export const ProductButtons = ({ className, style }: Props) => {
+
+	const { increaseBy, counter, maxCount } = useContext(ProductContext);
+
+//TODO: Una función isMaxReached = useCallback, dependencias [counter, maxCounter]
+//? True si el count === maxCount, caso contrario False
+
+const isMaxReached = useCallback(
+	() => !!maxCount && counter === maxCount, // retorna true o false
+	[counter, maxCount],
+)
+
+	return (
+		<div className={`	${styles.buttonsContainer} ${className}`} style={style}>
+			<button className={styles.buttonMinus} onClick={() => increaseBy(-1)}>
+				-
+			</button>
+			<div className={styles.countLabel}>{counter}</div>
+
+			<button className={`${styles.buttonAdd} ${ isMaxReached() && styles.disabled}`} onClick={() => increaseBy(1)}>
+				+
+			</button>
+		</div>
+	);
+};

package/src/components/ProductCard.tsx

@@ -0,0 +1,70 @@
+import React, { JSX } from 'react';
+import { useProduct } from '../hooks/useProduct';
+import {
+  InitialValues,
+  onChangeArgs,
+  Product,
+  ProductCardHandlers,
+} from '../interfaces/interfaces';
+import styles from '../styles/styles.module.css';
+
+import { ProductImage } from './ProductImage';
+import { ProductTitle } from './ProductTitle';
+import { ProductButtons } from './ProductButtons';
+import { ProductContext } from './ProductContext';
+
+const { Provider } = ProductContext;
+
+export interface Props {
+  product: Product;
+  // children?: ReactElement | ReactElement[];
+  children: (args: ProductCardHandlers) => JSX.Element;
+  className?: string;
+  style?: React.CSSProperties;
+  onChange?: (args: onChangeArgs) => void;
+  value?: number;
+  initialValues?: InitialValues;
+}
+
+export const ProductCard = ({
+  children,
+  product,
+  className,
+  style,
+  onChange,
+  value,
+  initialValues,
+}: Props) => {
+  const {
+    counter,
+    increaseBy,
+    isMaxCountReached,
+    maxCount,
+    reset,
+  } = useProduct({
+    onChange,
+    product,
+    value,
+    initialValues,
+  });
+
+  return (
+    <Provider value={{ counter, increaseBy, maxCount, product }}>
+      <div className={`${styles.productCard} ${className}`} style={style}>
+        {/* {children} */}
+        {children({
+          count: counter,
+          isMaxCountReached,
+          maxCount: initialValues?.maxCount,
+          product,
+          increaseBy,
+          reset,
+        })}
+      </div>
+    </Provider>
+  );
+};
+
+ProductCard.Image = ProductImage;
+ProductCard.Title = ProductTitle;
+ProductCard.Buttons = ProductButtons;

package/src/components/ProductContext.tsx

@@ -0,0 +1,5 @@
+// ProductContext.tsx
+import { createContext } from "react";
+import { ProductContextProps } from "../interfaces/interfaces";
+
+export const ProductContext = createContext({} as ProductContextProps);

package/src/components/ProductImage.tsx

@@ -0,0 +1,27 @@
+import React, { useContext } from "react";
+import styles from "../styles/styles.module.css";
+
+// import noImages from "../assets/no-image.jpg";
+import { ProductContext } from "./ProductContext";
+
+export interface Props {
+	img?: string;
+	className?: string;
+	style?: React.CSSProperties;
+}
+const DEFAULT_IMAGE =
+  "https://via.placeholder.com/300x200?text=No+Image";
+
+export const ProductImage = ({ img , className, style }: Props) => {
+	const { product } = useContext(ProductContext);
+	let imgToShow: string = "";
+	if (img) {
+		imgToShow = img;
+	} else if (product.img) {
+		imgToShow = product.img;
+	} else {
+		imgToShow = DEFAULT_IMAGE;
+	}
+
+	return <img className={`	${styles.productImg} ${className}`} src={imgToShow} alt="Product" style={style} />;
+};

package/src/components/ProductTitle.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement, useContext } from "react";
+import styles from "../styles/styles.module.css";
+import { ProductContext } from "./ProductContext";
+
+export interface Props {
+	title?: string;
+	className?: string;
+	style?: React.CSSProperties;
+}
+
+// export const ProductTitle = ({ title, className }: { title?: string, className?: string }): ReactElement => {
+export const ProductTitle = ({ title, className, style }: Props): ReactElement => {
+	const { product } = useContext(ProductContext);
+
+	return (
+		<span className={`${styles.productTitle} ${className}`} style={style}>
+			{title || product.title}
+		</span>
+	);
+};
+
+

package/src/components/index.ts

@@ -0,0 +1,16 @@
+import { ProductCard as ProductCardHOC } from './ProductCard';
+import { ProductCardHOCProps } from '../interfaces/interfaces';
+import { ProductButtons } from './ProductButtons';
+import { ProductImage } from './ProductImage';
+import { ProductTitle } from './ProductTitle';
+export { ProductButtons } from './ProductButtons';
+export { ProductImage } from './ProductImage';
+export { ProductTitle } from './ProductTitle';
+
+export const ProductCard: ProductCardHOCProps = Object.assign(ProductCardHOC, {
+  Button: ProductButtons,
+  Image: ProductImage,
+  Title: ProductTitle,
+});
+
+export default ProductCard;

package/src/hooks/useProduct.ts

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from "react";
+import { InitialValues, onChangeArgs, Product } from "../interfaces/interfaces";
+
+interface useProductArgs {
+	product: Product;
+	onChange?: (args: onChangeArgs) => void;
+	value?: number;
+	initialValues?: InitialValues;
+}
+
+export const useProduct = ({
+	onChange,
+	product,
+	value = 0,
+	initialValues,
+}: useProductArgs) => {
+	// if (initialValues) {
+	// 	value = initialValues.count || value;
+	// }
+
+	const [counter, setCounter] = useState<number>(initialValues?.count || value);
+
+	const isMounted = useRef(false);
+
+	const increaseBy = (value?: number) => {
+		const amount = value ?? 1;
+		let newValue = Math.max(counter + amount, 0);
+
+		if (initialValues?.maxCount) {
+			newValue = Math.min(newValue, initialValues.maxCount);
+		}
+
+		setCounter(newValue);
+
+		onChange && onChange({ count: newValue, product });
+	};
+
+	const reset = () => {
+		const newValue = initialValues?.count || value;
+		setCounter(newValue);
+		onChange && onChange({ count: newValue, product });
+
+	}
+
+	// El use ref se puede usar como un elemento que no tiene dependencias de renderizado
+	useEffect(() => {
+		if (!isMounted.current) return;
+		setCounter(value);
+	}, [value]);
+
+	useEffect(() => {
+		isMounted.current = true;
+	}, []);
+
+	return {
+		//Props
+		counter,
+		maxCount: initialValues?.maxCount,
+		//Methods
+		increaseBy,
+		isMaxCountReached: !!initialValues?.maxCount && counter === initialValues.maxCount,
+		reset
+	};
+};

package/src/index.tsx

@@ -0,0 +1 @@
+export * from "./components";

package/src/interfaces/interfaces.ts

@@ -0,0 +1,49 @@
+import { JSX, JSXElementConstructor, ReactElement } from 'react';
+import { Props as ProductCardProps } from '../components/ProductCard';
+import { Props as ProductTitleProps } from '../components/ProductTitle';
+import { Props as ProductImageProps } from '../components/ProductImage';
+import { Props as ProductButtonsProps } from '../components/ProductButtons';
+
+export interface Product {
+  id: string;
+  title: string;
+  img?: string;
+}
+
+export interface ProductContextProps {
+  counter: number;
+  maxCount?: number;
+  product: Product;
+  increaseBy: (value?: number) => void;
+}
+
+export interface ProductCardHOCProps {
+  ({ children, product }: ProductCardProps): JSX.Element;
+  Image: (Props: ProductImageProps) => JSX.Element;
+  Button: (Props: ProductButtonsProps) => JSX.Element;
+  Title: (
+    Props: ProductTitleProps
+  ) => ReactElement<unknown, string | JSXElementConstructor<any>>;
+}
+
+export interface onChangeArgs {
+  product: Product;
+  count: number;
+}
+
+export interface ProductsInCart extends Product {
+  count: number;
+}
+export interface InitialValues {
+  count?: number;
+  maxCount?: number;
+}
+
+export interface ProductCardHandlers {
+  count: number;
+  isMaxCountReached: boolean;
+  maxCount?: number;
+  product: Product;
+  increaseBy: (value: number) => void;
+  reset: () => void;
+}

package/src/styles/styles.module.css

@@ -0,0 +1,71 @@
+.productCard {
+  background-color: #1e2025;
+  border-radius: 15px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
+  color: white;
+  padding-bottom: 5px;
+  font-family: Arial, Helvetica, sans-serif;
+  width: 250px;
+  margin-right: 5px;
+  margin-top: 5px;
+}
+
+.productImg {
+  border-radius: 15px 15px 0px 0px;
+  width: 100%;
+}
+
+.productDescription {
+  margin: 10px;
+}
+
+.buttonsContainer {
+  margin: 10px;
+  display: flex;
+  flex-direction: row;
+}
+
+.buttonMinus {
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid white;
+  border-radius: 5px 0px 0px 5px;
+  color: white;
+  font-size: 20px;
+  width: 30px;
+}
+
+.buttonMinus:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.countLabel {
+  border-bottom: 1px solid white;
+  border-top: 1px solid white;
+  color: white;
+  font-size: 16px;
+  height: 25px;
+  padding-top: 5px;
+  text-align: center;
+  width: 30px;
+}
+
+.buttonAdd {
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid white;
+  border-radius: 0px 5px 5px 0px;
+  color: white;
+  font-size: 20px;
+  width: 30px;
+}
+
+.buttonAdd:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.disabled {
+  border-color: grey !important;
+  border-left: 1px solid white !important;
+  color: grey !important;
+}

package/src/typings.d.ts

@@ -0,0 +1,9 @@
+declare module '*.css' {
+    const content: { [className: string]: string };
+    export default content;
+}
+
+declare module "*.jpg" {
+    const value: any;
+    export default value;
+}