diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..535e4b7
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+ build:
+ name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+ runs-on: ${{ matrix.os }}
+ strategy:
+ matrix:
+ node: ['10.x', '12.x', '14.x']
+ os: [ubuntu-latest, windows-latest, macOS-latest]
+
+ steps:
+ - name: Checkout repo
+ uses: actions/checkout@v2
+
+ - name: Use Node ${{ matrix.node }}
+ uses: actions/setup-node@v1
+ with:
+ node-version: ${{ matrix.node }}
+
+ - name: Install deps and build (with cache)
+ uses: bahmutov/npm-install@v1
+
+ - name: Lint
+ run: yarn lint
+
+ - name: Test
+ run: yarn test --ci --coverage --maxWorkers=2
+
+ - name: Build
+ run: yarn build
diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml
new file mode 100644
index 0000000..6021cda
--- /dev/null
+++ b/.github/workflows/size.yml
@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+ size:
+ runs-on: ubuntu-latest
+ env:
+ CI_JOB_NUMBER: 1
+ steps:
+ - uses: actions/checkout@v1
+ - uses: andresz1/size-limit-action@v1
+ with:
+ github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d4de8fc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..53ebcdc
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 flpmcruz
+
+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.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3915c8f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,31 @@
+# FLP-Product-Card
+
+Este es un paquete de ejemplo de despliegue a NPM
+
+## Felipe Mireles Cruz
+
+# Ejemplo
+
+```
+import { ProductCard, ProductImage, ProductTitle, ProductButtons } from 'flp-product-card'
+```
+
+```
+
+{
+ ({ reset, increaseBy, isMaxCountReached, count, maxCount }) => (
+ <>
+
+```
diff --git a/example/.npmignore b/example/.npmignore
new file mode 100644
index 0000000..587e4ec
--- /dev/null
+++ b/example/.npmignore
@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
new file mode 100644
index 0000000..547e2e0
--- /dev/null
+++ b/example/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Playground
+
+
+
+
+
+
+
diff --git a/example/index.tsx b/example/index.tsx
new file mode 100644
index 0000000..73387c6
--- /dev/null
+++ b/example/index.tsx
@@ -0,0 +1,14 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Thing } from '../.';
+
+const App = () => {
+ return (
+
+
+ );
+};
+
+ReactDOM.render(
+
increaseBy(-1)} className={styles.buttonMinus}> -
+
{counter}
+
increaseBy(+1)} className={`${styles.buttonAdd} ${isMaxReached() && styles.disabled}`}> +
+
+
+ {
+ children({
+ count: counter,
+ isMaxCountReached,
+ maxCount: initialValues?.maxCount,
+ product,
+ increaseBy,
+ reset
+ })
+ }
+
+
+ )
+}
diff --git a/src/components/ProductImage.tsx b/src/components/ProductImage.tsx
new file mode 100644
index 0000000..4c7de8f
--- /dev/null
+++ b/src/components/ProductImage.tsx
@@ -0,0 +1,23 @@
+import React, { useContext } from "react"
+import { ProductContext } from "./ProductCard"
+import noImage from '../assets/no-image.jpg'
+import styles from '../styles/styles.module.css'
+
+export interface Props {
+ img?: string;
+ className?: string;
+ style?: React.CSSProperties;
+}
+
+export const ProductImage = ({ img = '', className, style }: Props) => {
+ const { product } = useContext(ProductContext)
+
+ return (
+
+ {title ? title : product.title}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..1edec10
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,17 @@
+import { ProductCard as ProductCardHOC } from "./ProductCard";
+import { ProductButtons } from "./ProductButtons";
+import { ProductImage } from "./ProductImage";
+import { ProductTitle } from "./ProductTitle";
+import { ProductCardHOCProps } from "../interfaces/interfaces";
+
+export { ProductButtons } from "./ProductButtons";
+export { ProductImage } from "./ProductImage";
+export { ProductTitle } from "./ProductTitle";
+
+export const ProductCard: ProductCardHOCProps = Object.assign(ProductCardHOC, {
+ Title: ProductTitle,
+ Image: ProductImage,
+ Buttons: ProductButtons,
+});
+
+export default ProductCard;
diff --git a/src/hooks/useProduct.ts b/src/hooks/useProduct.ts
new file mode 100644
index 0000000..76fc042
--- /dev/null
+++ b/src/hooks/useProduct.ts
@@ -0,0 +1,43 @@
+import { useState, useEffect, useRef } from "react";
+import { Product, onChangeArgs, InitialValues } from "../interfaces/interfaces";
+
+interface useProductArgs {
+ product: Product;
+ onChange?: (args: onChangeArgs) => void;
+ value?: number;
+ initialValues?: InitialValues;
+}
+
+export const useProduct = ({
+ onChange,
+ product,
+ value = 0,
+ initialValues,
+}: useProductArgs) => {
+ const [counter, setCounter] = useState(initialValues?.count || value);
+ const isMounted = useRef(false);
+
+ useEffect(() => {
+ if (!isMounted.current) return;
+ setCounter(value);
+ }, [value]);
+
+ const increaseBy = (value: number) => {
+ const newValue = Math.max(0, counter + value);
+ setCounter(newValue);
+ onChange && onChange({ count: newValue, product });
+ };
+
+ const reset = () => {
+ setCounter(initialValues?.count || 0);
+ };
+
+ return {
+ counter,
+ isMaxCountReached:
+ !!initialValues?.count && initialValues.maxCount === counter,
+ maxCount: initialValues?.maxCount,
+ increaseBy,
+ reset,
+ };
+};
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..4ac193e
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1 @@
+export * from './components'
\ No newline at end of file
diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts
new file mode 100644
index 0000000..ec519b8
--- /dev/null
+++ b/src/interfaces/interfaces.ts
@@ -0,0 +1,48 @@
+import { Props as ProductButtonsProps } from "../components/ProductButtons";
+import { Props as ProductCardProps } from "../components/ProductCard";
+import { Props as ProductImageProps } from "../components/ProductImage";
+import { Props as ProductTitleProps } from "../components/ProductTitle";
+
+export interface Product {
+ id: string;
+ title: string;
+ img?: string;
+}
+
+export interface ProductCardHOCProps {
+ ({ children, product }: ProductCardProps): JSX.Element;
+ Title: (Props: ProductTitleProps) => JSX.Element;
+ Image: (Props: ProductImageProps) => JSX.Element;
+ Buttons: (Props: ProductButtonsProps) => JSX.Element;
+}
+
+export interface ProductContextProps {
+ counter: number;
+ product: Product;
+ maxCount?: number;
+ increaseBy: (value: number) => void;
+}
+
+export interface onChangeArgs {
+ product: Product;
+ count: number;
+}
+
+export interface ProductInCart 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;
+}
diff --git a/src/styles/styles.module.css b/src/styles/styles.module.css
new file mode 100644
index 0000000..46851a2
--- /dev/null
+++ b/src/styles/styles.module.css
@@ -0,0 +1,74 @@
+
+
+.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;
+}
\ No newline at end of file
diff --git a/src/typings.d.ts b/src/typings.d.ts
new file mode 100644
index 0000000..f9a2c5a
--- /dev/null
+++ b/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;
+}
diff --git a/test/blah.test.tsx b/test/blah.test.tsx
new file mode 100644
index 0000000..f05ba9b
--- /dev/null
+++ b/test/blah.test.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Thing } from '../src';
+
+describe('it', () => {
+ it('renders without crashing', () => {
+ const div = document.createElement('div');
+ ReactDOM.render(