RARO Products Pack

Libreria de componentes React para construir tarjetas de productos con contador, limite maximo, estado controlado y componentes compuestos.

Instalacion

pnpm add raro-products-pack

Tambien puedes usar npm o yarn:

npm install raro-products-pack
yarn add raro-products-pack

Requiere react y react-dom como peer dependencies (>=18.0.0).

Uso Basico

import { ProductCard } from "raro-products-pack";

const product = {
  id: "1",
  title: "Coffee Mug",
  img: "https://example.com/mug.jpg",
};

export const App = () => {
  return (
    <ProductCard product={product}>
      {() => (
        <>
          <ProductCard.Image />
          <ProductCard.Title />
          <ProductCard.Buttons />
        </>
      )}
    </ProductCard>
  );
};

Ejemplo Completo

import { ProductCard } from "raro-products-pack";

const product = {
  id: "1",
  title: "Product title",
  img: "https://example.com/product.jpg",
};

export const ProductExample = () => {
  return (
    <ProductCard
      product={product}
      className="bg-dark text-white"
      initialValues={{
        count: 4,
        maxCount: 10,
      }}
      onChange={({ product, count }) => {
        console.log(product, count);
      }}
    >
      {({ reset, isMaxCountReached, increasyBy, counter }) => (
        <>
          <ProductCard.Image className="custom-image" />
          <ProductCard.Title className="text-white" />
          <ProductCard.Buttons className="custom-buttons" />

          <button disabled={counter === 4} className="reset-button" onClick={reset}>
            Reset
          </button>

          <button
            disabled={counter === 0}
            className="reset-button"
            onClick={() => increasyBy(-2)}
          >
            -2
          </button>

          <button
            disabled={isMaxCountReached}
            className="reset-button"
            onClick={() => increasyBy(2)}
          >
            +2
          </button>
        </>
      )}
    </ProductCard>
  );
};

Componentes

ProductCard

Componente principal. Maneja el estado del contador y provee el contexto para sus componentes hijos.

| Prop | Tipo | Requerida | Descripcion | | --- | --- | --- | --- | | product | Product | Si | Producto que se mostrara en la tarjeta. | | children | (args: ProductCartHandlers) => ReactNode | Si | Render prop con los handlers y estado del producto. | | className | string | No | Clases CSS adicionales para el contenedor. | | style | CSSProperties | No | Estilos inline para el contenedor. | | onChange | (args: onChangeArgs) => void | No | Callback que se ejecuta cuando cambia el contador. | | value | number | No | Valor controlado del contador. | | initialValues | InitialValues | No | Valores iniciales del contador y limite maximo. |

ProductCard.Image

Muestra la imagen del producto. Si el producto no tiene img, usa una imagen por defecto.

| Prop | Tipo | Requerida | Descripcion | | --- | --- | --- | --- | | className | string | No | Clases CSS adicionales para la imagen. |

ProductCard.Title

Muestra el titulo del producto.

| Prop | Tipo | Requerida | Descripcion | | --- | --- | --- | --- | | className | string | No | Clases CSS adicionales para el titulo. |

ProductCard.Buttons

Muestra los botones - y + junto con el contador actual.

| Prop | Tipo | Requerida | Descripcion | | --- | --- | --- | --- | | className | string | No | Clases CSS adicionales para el contenedor de botones. | | style | CSSProperties | No | Estilos inline para el contenedor de botones. |

Tipos

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

interface InitialValues {
  count?: number;
  maxCount?: number;
}

interface ProductCartHandlers {
  counter: number;
  isMaxCountReached: boolean;
  product: Product;
  increasyBy: (value: number) => void;
  reset: () => void;
  maxCount?: number;
}

interface onChangeArgs {
  product: Product;
  count: number;
}

Scripts De Desarrollo

pnpm test
pnpm test:watch
pnpm build

Build

El paquete genera archivos CommonJS, ES Modules y declaraciones TypeScript en dist/.

pnpm build

Licencia

ISC