@ecomiq/storefront 2.1.3 → 3.0.0

package/src/components/hero.tsx

@@ -1,291 +0,0 @@
-import { Link } from '../link'
-import { Carousel } from '../ui/carousel'
-import { cn } from '../ui/cn'
-import { buttonVariants } from '../ui/button'
-import type { CmsPageDetailsDto, CmsSectionDto } from '@ecomiq/core'
-import { useEffect, useRef, useState } from 'react'
-import { z } from 'zod'
-
-/** Slide tipado para uso manual (sin CMS). */
-export type HeroSlide = {
-  id?: string
-  title: string
-  subtitle?: string
-  highlight?: string
-  description?: string
-  ctaText?: string
-  ctaUrl?: string
-  imageUrl?: string
-}
-
-export type HeroProps = {
-  /** Página CMS: busca la sección hero automáticamente. */
-  page?: Pick<CmsPageDetailsDto, 'sections'> | null
-  /** Sección CMS directa (prioridad sobre `page`). */
-  section?: CmsSectionDto | null
-  /** Slides manuales (prioridad máxima). */
-  slides?: HeroSlide[]
-  /** Autoplay en ms. Default: 6000. `false` para desactivar. */
-  autoplay?: number | false
-  /** Altura fija en px. Si no, usa `section.settings.height`. */
-  height?: number
-  className?: string
-  fallbacks?: {
-    title?: string
-    subtitle?: string
-    ctaText?: string
-    ctaUrl?: string
-  }
-}
-
-const HERO_SECTION_TYPES = new Set(['hero', 'banner', 'slideshow', 'carousel'])
-const HERO_BLOCK_TYPES = new Set(['slide'])
-
-const HeroTextSchema = z.string().trim().min(1)
-
-const HeroSectionSettingsSchema = z
-  .object({
-    enabled: z.boolean().optional(),
-    title: HeroTextSchema.optional(),
-    subtitle: HeroTextSchema.optional(),
-    description: HeroTextSchema.optional(),
-    ctaText: HeroTextSchema.optional(),
-    ctaUrl: HeroTextSchema.optional(),
-    imageUrl: HeroTextSchema.optional(),
-    height: z.number().positive().optional(),
-  })
-  .strip()
-
-const HeroBlockSettingsSchema = z
-  .object({
-    title: HeroTextSchema,
-    subtitle: HeroTextSchema.optional(),
-    highlight: HeroTextSchema.optional(),
-    description: HeroTextSchema.optional(),
-    ctaText: HeroTextSchema.optional(),
-    ctaUrl: HeroTextSchema.optional(),
-    imageUrl: HeroTextSchema.optional(),
-  })
-  .strip()
-
-function isHeroSection(section: CmsSectionDto): boolean {
-  return HERO_SECTION_TYPES.has(section.type.toLowerCase())
-}
-
-export function findHeroSection(
-  page?: Pick<CmsPageDetailsDto, 'sections'> | null,
-): CmsSectionDto | null {
-  return page?.sections.find(isHeroSection) ?? null
-}
-
-function heroHeightPx(
-  sectionSettings: z.infer<typeof HeroSectionSettingsSchema> | null,
-  height?: number,
-): number | undefined {
-  if (typeof height === 'number' && height > 0) return height
-  return sectionSettings?.height
-}
-
-function slidesFromSection(
-  section: CmsSectionDto,
-  sectionSettings: z.infer<typeof HeroSectionSettingsSchema>,
-  fallbacks: NonNullable<HeroProps['fallbacks']>,
-): HeroSlide[] {
-  const blocks = [...section.blocks].sort((a, b) => a.order - b.order)
-  if (blocks.length === 0) {
-    return [
-      {
-        id: section.id,
-        title: sectionSettings.title ?? fallbacks.title ?? 'Nueva colección',
-        subtitle: sectionSettings.subtitle ?? fallbacks.subtitle,
-        description: sectionSettings.description,
-        ctaText: sectionSettings.ctaText ?? fallbacks.ctaText ?? 'Ver colección',
-        ctaUrl: sectionSettings.ctaUrl ?? fallbacks.ctaUrl ?? '/collections/all',
-        imageUrl: sectionSettings.imageUrl,
-      },
-    ]
-  }
-
-  const slides: HeroSlide[] = []
-  for (const block of blocks) {
-    if (!HERO_BLOCK_TYPES.has(block.type.toLowerCase())) continue
-
-    const parsed = HeroBlockSettingsSchema.safeParse(block.settings)
-    if (!parsed.success) continue
-
-    slides.push({
-      id: block.id,
-      title: parsed.data.title,
-      subtitle: parsed.data.subtitle,
-      highlight: parsed.data.highlight,
-      description: parsed.data.description ?? sectionSettings.subtitle,
-      ctaText: parsed.data.ctaText ?? fallbacks.ctaText ?? 'Ver colección',
-      ctaUrl: parsed.data.ctaUrl ?? fallbacks.ctaUrl ?? '/collections/all',
-      imageUrl: parsed.data.imageUrl,
-    })
-  }
-
-  return slides
-}
-
-function resolveCmsHero(
-  section: CmsSectionDto,
-  fallbacks: NonNullable<HeroProps['fallbacks']>,
-): {
-  settings: z.infer<typeof HeroSectionSettingsSchema>
-  slides: HeroSlide[]
-} | null {
-  const parsed = HeroSectionSettingsSchema.safeParse(section.settings)
-  if (!parsed.success || parsed.data.enabled === false) return null
-
-  return {
-    settings: parsed.data,
-    slides: slidesFromSection(section, parsed.data, fallbacks),
-  }
-}
-
-function selectedCmsSection(props: HeroProps): CmsSectionDto | null {
-  if (props.section) {
-    if (isHeroSection(props.section)) return props.section
-    return null
-  }
-
-  return findHeroSection(props.page)
-}
-
-function resolveSlides(props: HeroProps): { slides: HeroSlide[]; heightPx?: number } {
-  if (props.slides?.length) {
-    let sectionSettings: z.infer<typeof HeroSectionSettingsSchema> | null = null
-    if (props.section) {
-      const parsed = HeroSectionSettingsSchema.safeParse(props.section.settings)
-      if (parsed.success) sectionSettings = parsed.data
-    }
-    return {
-      slides: props.slides,
-      heightPx: heroHeightPx(sectionSettings, props.height),
-    }
-  }
-
-  const section = selectedCmsSection(props)
-  if (!section) return { slides: [], heightPx: props.height }
-
-  const resolved = resolveCmsHero(section, props.fallbacks ?? {})
-  if (!resolved) return { slides: [], heightPx: props.height }
-
-  return {
-    slides: resolved.slides,
-    heightPx: heroHeightPx(resolved.settings, props.height),
-  }
-}
-
-function HeroSlideContent({
-  slide,
-  priorityImage,
-  heightPx,
-}: {
-  slide: HeroSlide
-  priorityImage?: boolean
-  heightPx?: number
-}) {
-  const [failedImage, setFailedImage] = useState<string | null>(null)
-  const imageRef = useRef<HTMLImageElement>(null)
-  const hasImage = Boolean(slide.imageUrl && slide.imageUrl !== failedImage)
-
-  useEffect(() => {
-    const image = imageRef.current
-    if (slide.imageUrl && image?.complete && image.naturalWidth === 0) {
-      setFailedImage(slide.imageUrl)
-    }
-  }, [slide.imageUrl])
-
-  return (
-    <div
-      className={cn(
-        'relative w-full overflow-hidden',
-        !heightPx && 'min-h-[min(70vh,520px)] md:aspect-[21/9] md:min-h-0',
-      )}
-      style={heightPx ? { height: `${heightPx}px` } : undefined}
-    >
-      {hasImage ? (
-        <img
-          ref={imageRef}
-          src={slide.imageUrl}
-          alt=""
-          aria-hidden
-          decoding="async"
-          fetchPriority={priorityImage ? 'high' : 'auto'}
-          loading={priorityImage ? 'eager' : 'lazy'}
-          onError={() => setFailedImage(slide.imageUrl ?? null)}
-          className="pointer-events-none absolute inset-0 h-full w-full object-cover object-center"
-        />
-      ) : (
-        <div className="absolute inset-0 bg-muted" aria-hidden />
-      )}
-
-      <div
-        className="absolute inset-0 bg-linear-to-r from-black/80 via-black/45 to-black/10"
-        aria-hidden
-      />
-
-      <div className="relative mx-auto flex h-full min-h-[inherit] w-full max-w-6xl items-center px-4 py-12 md:py-16">
-        <div className="relative z-10 max-w-xl text-white">
-          {slide.subtitle ? (
-            <p className="text-xs font-medium uppercase tracking-[0.2em] text-white/70">
-              {slide.subtitle}
-            </p>
-          ) : null}
-          <h1 className="mt-3 text-4xl font-light leading-tight tracking-tight md:text-5xl lg:text-6xl">
-            {slide.title}
-          </h1>
-          {slide.highlight ? (
-            <p className="mt-2 text-2xl font-medium tracking-wide text-primary-foreground md:text-3xl">
-              {slide.highlight}
-            </p>
-          ) : null}
-          {slide.description ? (
-            <p className="mt-4 max-w-lg text-sm leading-relaxed text-white/80 md:text-base">
-              {slide.description}
-            </p>
-          ) : null}
-          {slide.ctaText && slide.ctaUrl ? (
-            <Link to={slide.ctaUrl} className={cn(buttonVariants({ size: 'lg' }), 'mt-8')}>
-              {slide.ctaText}
-            </Link>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/**
- * Hero de tienda con carrusel Embla interno.
- *
- * ```tsx
- * <Hero page={homePage} />
- * <Hero section={heroSection} />
- * <Hero slides={[{ title: 'Hola', ctaText: 'Ver', ctaUrl: '/' }]} />
- * ```
- */
-export function Hero(props: HeroProps) {
-  const { slides, heightPx } = resolveSlides(props)
-  if (!slides.length) return null
-
-  return (
-    <Carousel
-      className={cn('bg-foreground', props.className)}
-      fade
-      autoplay={props.autoplay === undefined ? 6000 : props.autoplay}
-      aria-label="Destacados"
-    >
-      {slides.map((slide, index) => (
-        <HeroSlideContent
-          key={slide.id ?? index}
-          slide={slide}
-          priorityImage={index === 0}
-          heightPx={heightPx}
-        />
-      ))}
-    </Carousel>
-  )
-}

package/src/config.d.ts

@@ -1,94 +0,0 @@
-import type { EcomiqThemeConfig } from './index'
-
-export interface EcomiqApiConfig {
-  baseUrl?: string
-  version?: string
-  headers?: Record<string, string>
-  timeoutMs?: number
-}
-
-export interface EcomiqCloudConfig {
-  /**
-   * URL privada del plano de control. En producción debe configurarse de forma
-   * explícita; durante `ecomiq dev` el runtime usa http://127.0.0.1:8020.
-   */
-  baseUrl?: string
-  /**
-   * Slug canónico en Cloud. Si se omite, se deriva del primer label de
-   * `domain`.
-   */
-  storeSlug?: string
-  timeoutMs?: number
-  /** TTL del cache de la publicación activa. Default: 15 segundos. */
-  cacheTtlMs?: number
-}
-
-export type EcomiqCloudflareRoute =
-  | string
-  | {
-      pattern: string
-      zone_id: string
-      custom_domain?: boolean
-    }
-  | {
-      pattern: string
-      zone_name: string
-      custom_domain?: boolean
-    }
-  | {
-      pattern: string
-      custom_domain: boolean
-      enabled?: boolean
-      previews_enabled?: boolean
-    }
-
-export interface EcomiqConfigInput {
-  /**
-   * Identidad de tienda para `x-Store-Domain`.
-   * Acepta `marketplace`, `marketplace.ecomiq.app` o `marketplace.pe`.
-   */
-  domain: string
-  api?: EcomiqApiConfig
-  /** Configuración server-only para resolver la publicación activa. */
-  cloud?: EcomiqCloudConfig
-  theme?: EcomiqThemeConfig
-  dev?: {
-    port?: number
-    apiBaseUrl?: string
-    /** Default `node`. `workerd` emula Cloudflare en local. */
-    runtime?: 'workerd' | 'node'
-    /**
-     * HTTPS en localhost. `true` = cert auto; `{ cert, key }` = PEM propios.
-     */
-    https?: boolean | { cert: string; key: string }
-  }
-  deploy?: {
-    target?: 'cloudflare'
-    name?: string
-    routes?: EcomiqCloudflareRoute[]
-  }
-  env?: Record<string, string>
-}
-
-export interface ResolvedEcomiqConfig
-  extends Omit<EcomiqConfigInput, 'api' | 'cloud'> {
-  api: {
-    baseUrl: string
-    version: string
-    headers?: Record<string, string>
-    timeoutMs: number
-  }
-  cloud?: {
-    baseUrl?: string
-    storeSlug?: string
-    timeoutMs: number
-    cacheTtlMs: number
-  }
-}
-
-export function parseConfig(
-  config: unknown,
-  options?: { source?: string },
-): ResolvedEcomiqConfig
-
-export function defineConfig(config: EcomiqConfigInput): ResolvedEcomiqConfig

package/src/config.mjs

@@ -1,146 +0,0 @@
-/**
- * Configuración base de un proyecto Ecomiq (ecomiq.config.js).
- * Se valida con Zod al arrancar la CLI para dar errores claros.
- *
- * Identidad de tienda, SEO, analytics y menús salen de `/v1/settings`.
- * Aquí solo queda lo operativo: domain, api, cloud, theme, dev, deploy, env.
- */
-import { z } from 'zod'
-
-const cloudflareRouteSchema = z.union([
-  z.string().min(1),
-  z
-    .object({
-      pattern: z.string().min(1),
-      zone_id: z.string().min(1),
-      custom_domain: z.boolean().optional(),
-    })
-    .strict(),
-  z
-    .object({
-      pattern: z.string().min(1),
-      zone_name: z.string().min(1),
-      custom_domain: z.boolean().optional(),
-    })
-    .strict(),
-  z
-    .object({
-      pattern: z.string().min(1),
-      custom_domain: z.boolean(),
-      enabled: z.boolean().optional(),
-      previews_enabled: z.boolean().optional(),
-    })
-    .strict(),
-])
-
-const configSchema = z.object({
-  /**
-   * Identidad de la tienda en el API storefront (header x-Store-Domain).
-   * Acepta slug corto o dominio: `marketplace`, `marketplace.ecomiq.app`, `marketplace.pe`.
-   */
-  domain: z.string().min(1),
-  /** API de storefront. baseUrl default: https://storefront.ecomiq.pe */
-  api: z
-    .object({
-      baseUrl: z.string().url().default('https://storefront.ecomiq.pe'),
-      /** Segmento de path de la API, ej. 'v1' → {baseUrl}/v1/settings */
-      version: z.string().min(1).default('v1'),
-      headers: z.record(z.string()).optional(),
-      /** Timeout en ms para cada request. */
-      timeoutMs: z.number().int().positive().default(10_000),
-    })
-    .default({}),
-  /**
-   * Plano de control server-only. `baseUrl` se exige operativamente en
-   * producción; si falta, el storefront degrada a la home clásica.
-   */
-  cloud: z
-    .object({
-      baseUrl: z.string().url().optional(),
-      artifactBaseUrl: z.string().url().optional(),
-      storeSlug: z
-        .string()
-        .trim()
-        .min(2)
-        .max(100)
-        .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/)
-        .optional(),
-      timeoutMs: z.number().int().positive().default(3_000),
-      cacheTtlMs: z.number().int().min(0).max(300_000).default(15_000),
-    })
-    .strict()
-    .optional(),
-  /** Tokens de tema; sobreescriben las variables CSS del design system. */
-  theme: z
-    .object({
-      primary: z.string().optional(),
-      primaryForeground: z.string().optional(),
-      background: z.string().optional(),
-      foreground: z.string().optional(),
-      accent: z.string().optional(),
-      radius: z.string().optional(),
-    })
-    .optional(),
-  dev: z
-    .object({
-      port: z.number().int().default(3000),
-      apiBaseUrl: z.string().url(),
-      /**
-       * Runtime SSR en `ecomiq dev`. Default: `node`.
-       * Usa `workerd` para emular Cloudflare Workers en local.
-       * `ecomiq build` / `deploy` siempre usan workerd.
-       */
-      runtime: z.enum(['workerd', 'node']),
-      /**
-       * HTTPS en localhost (`ecomiq dev`).
-       * `true` → certificado auto (basic-ssl).
-       * `{ cert, key }` → PEM propios relativos al proyecto.
-       */
-      https: z.union([
-        z.boolean(),
-        z
-          .object({
-            cert: z.string().min(1),
-            key: z.string().min(1),
-          })
-          .strict(),
-      ]),
-    })
-    .partial()
-    .optional(),
-  deploy: z
-    .object({
-      target: z.literal('cloudflare').default('cloudflare'),
-      /** Nombre del Worker en Cloudflare. */
-      name: z.string().optional(),
-      /** Rutas/custom domains del Worker. */
-      routes: z.array(cloudflareRouteSchema).optional(),
-    })
-    .optional(),
-  /** Variables expuestas al Worker (no secretas). */
-  env: z.record(z.string()).optional(),
-})
-
-export function parseConfig(config, options = {}) {
-  const source = options.source ?? 'ecomiq.config.js'
-  if (
-    config === null ||
-    typeof config !== 'object' ||
-    (Object.getPrototypeOf(config) !== Object.prototype && Object.getPrototypeOf(config) !== null)
-  ) {
-    throw new Error(`${source} inválido:\n  · <raíz>: el default export debe ser un objeto plano`)
-  }
-
-  const parsed = configSchema.safeParse(config)
-  if (!parsed.success) {
-    const issues = parsed.error.issues
-      .map((issue) => `  · ${issue.path.join('.') || '<raíz>'}: ${issue.message}`)
-      .join('\n')
-    throw new Error(`${source} inválido:\n${issues}`)
-  }
-  return parsed.data
-}
-
-export function defineConfig(config) {
-  return parseConfig(config)
-}

package/src/format-money.ts

@@ -1,31 +0,0 @@
-export type MoneyLocale = {
-  language: string
-  currency: string
-}
-
-/**
- * Formatea un monto con `Intl.NumberFormat` (moneda ISO-4217).
- *
- * @example
- * formatMoney(19.9, { language: 'es-PE', currency: 'PEN' })
- * formatMoney(19.9, 'es-PE', 'PEN')
- */
-export function formatMoney(value: number, locale: MoneyLocale): string
-export function formatMoney(value: number, language: string, currency: string): string
-export function formatMoney(
-  value: number,
-  languageOrLocale: string | MoneyLocale,
-  currency?: string,
-): string {
-  const language =
-    typeof languageOrLocale === 'string' ? languageOrLocale : languageOrLocale.language
-  const currencyCode =
-    typeof languageOrLocale === 'string' ? currency! : languageOrLocale.currency
-
-  return new Intl.NumberFormat(language, {
-    style: 'currency',
-    currency: currencyCode,
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(value)
-}

package/src/health.ts

@@ -1,90 +0,0 @@
-/**
- * Health interno del runtime storefront.
- * GET /ping            → liveness puro: "ok" 200 (target del probe de vm-manager).
- * GET /__ecomiq/health → proceso up + estado de /v1/settings (sin SSR de páginas).
- */
-import { getStorefrontClient } from './client'
-
-export const ECOMIQ_HEALTH_PATH = '/__ecomiq/health'
-export const ECOMIQ_PING_PATH = '/ping'
-
-export type EcomiqHealthSettingsStatus = {
-  ok: boolean
-  latencyMs: number
-  storeId?: string
-  domain?: string | null
-  error?: string
-}
-
-export type EcomiqHealthResponse = {
-  ok: true
-  settings: EcomiqHealthSettingsStatus
-}
-
-async function probeSettings(): Promise<EcomiqHealthSettingsStatus> {
-  const started = Date.now()
-  try {
-    const settings = await getStorefrontClient().getSettings()
-    return {
-      ok: true,
-      latencyMs: Date.now() - started,
-      storeId: settings.store.id,
-      domain: settings.store.domain ?? settings.store.slug,
-    }
-  } catch (error) {
-    return {
-      ok: false,
-      latencyMs: Date.now() - started,
-      error: error instanceof Error ? error.message : String(error),
-    }
-  }
-}
-
-/**
- * Si el request es al health interno, responde JSON.
- * Si no, `null` para que el caller siga con el fetch normal de TanStack.
- */
-export async function handleEcomiqHealth(
-  request: Request,
-): Promise<Response | null> {
-  const { pathname } = new URL(request.url)
-  if (pathname !== ECOMIQ_HEALTH_PATH && pathname !== ECOMIQ_PING_PATH) {
-    return null
-  }
-
-  if (request.method !== 'GET' && request.method !== 'HEAD') {
-    return new Response(null, {
-      status: 405,
-      headers: { allow: 'GET, HEAD' },
-    })
-  }
-
-  if (pathname === ECOMIQ_PING_PATH) {
-    return new Response(request.method === 'HEAD' ? null : 'ok', {
-      status: 200,
-      headers: {
-        'content-type': 'text/plain; charset=utf-8',
-        'cache-control': 'no-store',
-      },
-    })
-  }
-
-  const body: EcomiqHealthResponse = {
-    ok: true,
-    settings: await probeSettings(),
-  }
-
-  if (request.method === 'HEAD') {
-    return new Response(null, {
-      status: 200,
-      headers: { 'content-type': 'application/json; charset=utf-8' },
-    })
-  }
-
-  return Response.json(body, {
-    status: 200,
-    headers: {
-      'cache-control': 'no-store',
-    },
-  })
-}

package/src/hooks/index.ts

@@ -1,9 +0,0 @@
-export {
-  listRecentlyViewed,
-  trackRecentlyViewed,
-  toRecentlyViewedItem,
-  useRecentlyViewed,
-  useTrackRecentlyViewed,
-  type RecentlyViewedItem,
-  type TrackableProduct,
-} from './recently-viewed'