Paquetes npm
@cognitiondesk/storefrontv0.2.2
Bloques presentacionales para un catálogo público de productos — header, grilla, cards, galería. Sin fetching, sin llamadas al backend.
Instalación
Shell
npm install @cognitiondesk/storefrontPeer dependencies: react ≥17, react-dom ≥17
Inicio rápido
Corrido el 2026-09-25 en Node puro, esta llamada no necesita backend.
JavaScript
import { StorefrontHeader, ItemGrid, formatPrice } from '@cognitiondesk/storefront';
// Presentational: props in, callbacks out — you bring the items (fetch,
// getStaticProps, whatever you use), the component never calls a backend.
export function Store({ items, categories }) {
return (
<>
<StorefrontHeader storeName="Acme Bikes" />
<ItemGrid
items={items}
categories={categories}
itemHref={(item) => `/store/${item.id}`}
formatPrice={formatPrice}
labels={{
searchPlaceholder: 'Search…',
allCategories: 'All',
inStock: 'In stock',
outOfStock: 'Out of stock',
noItems: 'No items yet',
noResults: 'No results',
}}
/>
</>
);
}API
StorefrontHeader | Encabezado de la tienda. |
ItemGrid | Búsqueda + filtro por categoría sobre items ya cargados por el host, más la grilla de cards. Filtra en el cliente, no trae datos. |
ItemCard / ItemGallery | Card de un item y galería de imágenes. |
ContactLinks / ShareButton | Links de contacto y botón de compartir. |
formatPrice / resolveStorefrontTheme | Formateador de precio y resolución de tema (tokens --mn-*, claro por defecto). |