ma-product-card-lop/src/interfaces/interfaces.ts

Este es un ejemplo de despliegue de NPM.

import { ReactElement } from "react";
import { Props as ProductCardProps } from "../components/ProductCar";
import { Props as ProductTitleProps } from '../components/ProductTitle';
import { Props as ProductImageProps } from '../components/ProductImage';
import { Props as ProductButtonsProps } from '../components/ProductTitle';

// export interface ProductCardProps { 
//     product: Product;
//     children?: ReactElement | ReactElement[];
// }

export interface Product { 
    id: string;
    title: string;
    img?: string
}

export interface ProductContextProps {
    counter: number;
    increaseBy: (value: number) => void;
    product: Product;
    maxCount: number;
}

export interface ProductCardHOCProps {
    ({ children, product }:  ProductCardProps):JSX.Element,
    Image: (Props: ProductImageProps ) => JSX.Element,
    Title: (Props: ProductTitleProps ) => JSX.Element,
    Buttons: (Props: ProductButtonsProps ) => JSX.Element
}

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;
}