@ecomiq/storefront 1.1.9 → 2.0.0

package/src/components/hero.tsx

@@ -0,0 +1,291 @@
+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

@@ -0,0 +1,69 @@
+import type {
+  EcomiqAnalyticsConfig,
+  EcomiqLayoutConfig,
+  EcomiqSeoConfig,
+  EcomiqThemeConfig,
+} from './index'
+
+export interface EcomiqApiConfig {
+  baseUrl?: string
+  version?: string
+  headers?: Record<string, string>
+  timeoutMs?: 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 {
+  name: string
+  slug: string
+  description?: string
+  api?: EcomiqApiConfig
+  theme?: EcomiqThemeConfig
+  seo?: EcomiqSeoConfig
+  analytics?: EcomiqAnalyticsConfig
+  layout?: EcomiqLayoutConfig
+  dev?: {
+    port?: number
+    apiBaseUrl?: string
+  }
+  deploy?: {
+    target?: 'cloudflare'
+    name?: string
+    routes?: EcomiqCloudflareRoute[]
+  }
+  env?: Record<string, string>
+}
+
+export interface ResolvedEcomiqConfig extends Omit<EcomiqConfigInput, 'api'> {
+  api: {
+    baseUrl: string
+    version: string
+    headers?: Record<string, string>
+    timeoutMs: number
+  }
+}
+
+export function parseConfig(
+  config: unknown,
+  options?: { source?: string },
+): ResolvedEcomiqConfig
+
+export function defineConfig(config: EcomiqConfigInput): ResolvedEcomiqConfig

package/src/config.mjs

@@ -0,0 +1,165 @@
+/**
+ * Configuración base de un proyecto Ecomiq (ecomiq.config.js).
+ * Se valida con Zod al arrancar la CLI para dar errores claros.
+ */
+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({
+  /** Nombre visible de la tienda (header, <title>, worker por defecto). */
+  name: z.string().min(1),
+  /**
+   * Identidad de la tienda en el API storefront (header x-Store-Domain).
+   * Ej. 'marketplace'.
+   */
+  slug: z.string().min(1),
+  /** Descripción para SEO por defecto. */
+  description: z.string().optional(),
+  /** 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({}),
+  /** 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(),
+  /** SEO global, se mezcla con el `meta` de cada página (la página gana). */
+  seo: z
+    .object({
+      /** Plantilla del <title>. `%s` se reemplaza por el título de la página. */
+      titleTemplate: z.string().optional(),
+      keywords: z.array(z.string()).optional(),
+      /** Ruta dentro de public/, ej. '/favicon.svg'. */
+      favicon: z.string().optional(),
+      /** Imagen OG por defecto (URL absoluta o ruta en public/). */
+      ogImage: z.string().optional(),
+      twitterCard: z.enum(['summary', 'summary_large_image']).optional(),
+      /** Metas extra: [{ name | property, content }]. */
+      meta: z
+        .array(
+          z.object({
+            name: z.string().optional(),
+            property: z.string().optional(),
+            content: z.string(),
+          }),
+        )
+        .optional(),
+      /** <link> extra: [{ rel, href, ... }]. */
+      links: z.array(z.record(z.string())).optional(),
+    })
+    .optional(),
+  /** Analytics sin escribir código. */
+  analytics: z
+    .object({
+      /** ID de Google Analytics 4, ej. 'G-XXXXXXX'. */
+      googleAnalytics: z.string().optional(),
+      /** ID de Meta Pixel. */
+      metaPixel: z.string().optional(),
+      /** Dominio para Plausible, ej. 'tienda.ecomiq.app'. */
+      plausible: z.string().optional(),
+      /** Scripts arbitrarios: [{ src }] o [{ inline: '...' }]. */
+      scripts: z
+        .array(
+          z.object({
+            src: z.string().optional(),
+            inline: z.string().optional(),
+            defer: z.boolean().optional(),
+            async: z.boolean().optional(),
+          }),
+        )
+        .optional(),
+    })
+    .optional(),
+  /** Layout declarativo (usado por el layout por defecto; un layout.tsx en la raíz lo reemplaza). */
+  layout: z
+    .object({
+      /** Enlaces del header: [{ label, to }]. */
+      nav: z.array(z.object({ label: z.string(), to: z.string() })).optional(),
+      /** Texto del footer. Default: '{name} — creado con Ecomiq'. */
+      footerText: z.string().optional(),
+      /** Header pegado arriba con blur. Default: true. */
+      stickyHeader: z.boolean().default(true).optional(),
+    })
+    .optional(),
+  dev: z
+    .object({
+      port: z.number().int().default(3000),
+      apiBaseUrl: z.string().url(),
+    })
+    .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)
+}