@ecomiq/storefront 1.1.9 → 2.0.0

package/src/ui/card.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps } from 'react'
+import { cn } from './cn'
+
+export function Card({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export function CardHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+}
+
+export function CardTitle({ className, ...props }: ComponentProps<'h3'>) {
+  return <h3 className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+}
+
+export function CardDescription({ className, ...props }: ComponentProps<'p'>) {
+  return <p className={cn('text-sm text-muted-foreground', className)} {...props} />
+}
+
+export function CardContent({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cn('p-6 pt-0', className)} {...props} />
+}
+
+export function CardFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cn('flex items-center p-6 pt-0', className)} {...props} />
+}

package/src/ui/carousel.tsx

@@ -0,0 +1,218 @@
+import {
+  Children,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import Autoplay from 'embla-carousel-autoplay'
+import Fade from 'embla-carousel-fade'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from './cn'
+import { Button } from './button'
+
+type EmblaCarouselApi = UseEmblaCarouselType[1]
+
+type CarouselContextValue = {
+  api: EmblaCarouselApi | undefined
+  selectedIndex: number
+  scrollPrev: () => void
+  scrollNext: () => void
+  scrollTo: (index: number) => void
+  slideCount: number
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null)
+
+function useCarousel() {
+  const ctx = useContext(CarouselContext)
+  if (!ctx) throw new Error('Carousel components must be used within <Carousel>')
+  return ctx
+}
+
+export type CarouselProps = {
+  children: ReactNode
+  className?: string
+  /** Loop infinito. Default: true si hay más de un slide. */
+  loop?: boolean
+  /** Transición fade (Embla Fade). Default: false. */
+  fade?: boolean
+  /** Autoplay: delay en ms, o false para desactivar. Default: false. */
+  autoplay?: number | false
+  /** Flechas prev/next. Default: true si hay más de un slide. */
+  showArrows?: boolean
+  /** Dots de navegación. Default: true si hay más de un slide. */
+  showDots?: boolean
+  /** Etiqueta accesible del region. */
+  'aria-label'?: string
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>
+
+export function Carousel({
+  children,
+  className,
+  loop,
+  fade = false,
+  autoplay = false,
+  showArrows,
+  showDots,
+  'aria-label': ariaLabel = 'Carrusel',
+  ...rest
+}: CarouselProps) {
+  const slides = Children.toArray(children).filter(Boolean)
+  const slideCount = slides.length
+  const multi = slideCount > 1
+  const shouldLoop = loop ?? multi
+  const arrows = showArrows ?? multi
+  const dots = showDots ?? multi
+
+  const plugins = useMemo(() => {
+    if (!multi) return []
+    const list = []
+    if (fade) list.push(Fade())
+    if (autoplay !== false) {
+      list.push(
+        Autoplay({
+          delay: typeof autoplay === 'number' ? autoplay : 6000,
+          stopOnInteraction: false,
+          stopOnMouseEnter: true,
+        }),
+      )
+    }
+    return list
+  }, [multi, fade, autoplay])
+
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    { loop: shouldLoop, align: 'start', duration: 35 },
+    plugins,
+  )
+
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const resetAutoplay = useCallback(() => {
+    const plugin = emblaApi?.plugins()?.autoplay
+    if (plugin && 'reset' in plugin) plugin.reset()
+  }, [emblaApi])
+
+  const scrollPrev = useCallback(() => {
+    emblaApi?.scrollPrev()
+    resetAutoplay()
+  }, [emblaApi, resetAutoplay])
+
+  const scrollNext = useCallback(() => {
+    emblaApi?.scrollNext()
+    resetAutoplay()
+  }, [emblaApi, resetAutoplay])
+
+  const scrollTo = useCallback(
+    (index: number) => {
+      emblaApi?.scrollTo(index)
+      resetAutoplay()
+    },
+    [emblaApi, resetAutoplay],
+  )
+
+  useEffect(() => {
+    if (!emblaApi) return
+    const onSelect = () => setSelectedIndex(emblaApi.selectedScrollSnap())
+    onSelect()
+    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onSelect)
+    return () => {
+      emblaApi.off('select', onSelect)
+      emblaApi.off('reInit', onSelect)
+    }
+  }, [emblaApi])
+
+  const value = useMemo(
+    () => ({
+      api: emblaApi,
+      selectedIndex,
+      scrollPrev,
+      scrollNext,
+      scrollTo,
+      slideCount,
+    }),
+    [emblaApi, selectedIndex, scrollPrev, scrollNext, scrollTo, slideCount],
+  )
+
+  if (slideCount === 0) return null
+
+  return (
+    <CarouselContext.Provider value={value}>
+      <section
+        className={cn('group relative overflow-hidden', className)}
+        aria-label={ariaLabel}
+        role="region"
+        aria-roledescription="carrusel"
+        {...rest}
+      >
+        <div className="overflow-hidden" ref={emblaRef}>
+          <div className="flex touch-pan-y">
+            {slides.map((slide, index) => (
+              <div key={index} className="relative min-w-0 flex-[0_0_100%]">
+                {slide}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {arrows ? (
+          <div className="pointer-events-none absolute inset-x-0 top-1/2 z-20 flex -translate-y-1/2 justify-between px-4 md:px-8">
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={scrollPrev}
+              className="pointer-events-auto rounded-full border-white/20 bg-black/40 text-white shadow-sm backdrop-blur-sm hover:bg-black/60 hover:text-white"
+              aria-label="Slide anterior"
+            >
+              <ChevronLeft />
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={scrollNext}
+              className="pointer-events-auto rounded-full border-white/20 bg-black/40 text-white shadow-sm backdrop-blur-sm hover:bg-black/60 hover:text-white"
+              aria-label="Slide siguiente"
+            >
+              <ChevronRight />
+            </Button>
+          </div>
+        ) : null}
+
+        {dots ? (
+          <div
+            className="absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 gap-2 md:bottom-8"
+            role="tablist"
+            aria-label="Slides"
+          >
+            {slides.map((_, i) => (
+              <button
+                key={i}
+                type="button"
+                role="tab"
+                aria-selected={i === selectedIndex}
+                aria-label={`Slide ${i + 1}`}
+                onClick={() => scrollTo(i)}
+                className={cn(
+                  'h-2 w-2 rounded-full border border-white/30 transition md:h-2.5 md:w-2.5',
+                  i === selectedIndex ? 'scale-110 bg-white' : 'bg-white/45 hover:bg-white/70',
+                )}
+              />
+            ))}
+          </div>
+        ) : null}
+      </section>
+    </CarouselContext.Provider>
+  )
+}
+
+export { useCarousel }

package/src/ui/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/ui/index.ts

@@ -0,0 +1,8 @@
+export { Button, buttonVariants, type ButtonProps } from './button'
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card'
+export { Badge, type BadgeProps } from './badge'
+export { Skeleton } from './skeleton'
+export { Separator } from './separator'
+export { Carousel, useCarousel, type CarouselProps } from './carousel'
+export { StorefrontError, type StorefrontErrorProps } from './storefront-error'
+export { cn } from './cn'

package/src/ui/separator.tsx

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react'
+import { cn } from './cn'
+
+export function Separator({ className, ...props }: ComponentProps<'div'>) {
+  return <div role="separator" className={cn('h-px w-full bg-border', className)} {...props} />
+}

package/src/ui/skeleton.tsx

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react'
+import { cn } from './cn'
+
+export function Skeleton({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
+}

package/src/ui/storefront-error.tsx

@@ -0,0 +1,49 @@
+import { House, RefreshCw, TriangleAlert } from 'lucide-react'
+import { Button, buttonVariants } from './button'
+
+export interface StorefrontErrorProps {
+  title?: string
+  description?: string
+  onRetry?: () => void
+  returnTo?: string
+  returnLabel?: string
+}
+
+export function StorefrontError({
+  title = 'No pudimos cargar esta página',
+  description = 'La tienda no respondió como esperábamos. Inténtalo nuevamente en unos segundos.',
+  onRetry,
+  returnTo = '/',
+  returnLabel = 'Volver al inicio',
+}: StorefrontErrorProps) {
+  return (
+    <section className="mx-auto flex min-h-[55vh] w-full max-w-6xl items-center px-4 py-16" role="alert">
+      <div className="w-full max-w-xl border-l-2 border-primary pl-5 sm:pl-7">
+        <div className="mb-5 flex size-11 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+          <TriangleAlert className="size-5" aria-hidden="true" />
+        </div>
+        <p className="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+          Interrupción temporal
+        </p>
+        <h1 className="text-balance text-2xl font-semibold tracking-[-0.02em] sm:text-3xl">
+          {title}
+        </h1>
+        <p className="mt-3 max-w-md text-sm leading-6 text-muted-foreground">
+          {description}
+        </p>
+        <div className="mt-6 flex flex-wrap gap-2">
+          {onRetry ? (
+            <Button onClick={onRetry} className="min-h-10">
+              <RefreshCw aria-hidden="true" />
+              Intentar otra vez
+            </Button>
+          ) : null}
+          <a href={returnTo} className={buttonVariants({ variant: 'outline' })}>
+            <House aria-hidden="true" />
+            {returnLabel}
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/utils.ts

@@ -0,0 +1,36 @@
+import type { StorefrontSettings } from "@ecomiq/core";
+
+type StorefrontCmsPage = StorefrontSettings['cms']['pages'][number]
+
+function isRenderableCmsPage(p: StorefrontCmsPage): boolean {
+  return p.status === "published";
+}
+
+export function findStorefrontCmsPageBySlug(
+  settings: StorefrontSettings | null | undefined,
+  slug: string
+) {
+  const pages = settings?.cms?.pages;
+  if (!pages?.length) return null;
+  const raw = pages.find(
+    (p) => p.slug === slug && isRenderableCmsPage(p)
+  );
+  if (!raw) return null;
+  return raw;
+}
+
+export function cmsBranding(settings: StorefrontSettings | null | undefined) {
+  return settings?.cms?.settings?.branding;
+}
+
+export function cmsSeo(settings: StorefrontSettings | null | undefined) {
+  return settings?.cms?.settings?.seo;
+}
+
+export function storeDisplayName(settings: StorefrontSettings | null | undefined) {
+  return settings?.store?.name ?? cmsSeo(settings)?.siteName;
+}
+
+export function storeSeoDescription(settings: StorefrontSettings | null | undefined) {
+  return cmsSeo(settings)?.metaDescription ?? settings?.store?.description;
+}

package/src/vite-inline.mjs

@@ -0,0 +1,95 @@
+/**
+ * Config interna de Vite, construida en memoria por la CLI.
+ * No existe vite.config.ts en el proyecto del usuario ni en .ecomiq:
+ * los plugins se importan aquí (contexto del framework) y se pasan como
+ * instancias, así la resolución de módulos nunca depende del proyecto.
+ */
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { cloudflare } from '@cloudflare/vite-plugin'
+
+const postcssBrowserStub = fileURLToPath(
+  new URL('./runtime/postcss-browser-stub.mjs', import.meta.url),
+)
+
+function resolveSanitizeHtmlPostcss(source, importer) {
+  if (source !== 'postcss') return null
+  if (!importer?.includes('/sanitize-html/')) return null
+  return postcssBrowserStub
+}
+
+function sanitizeHtmlClientBoundary() {
+  return {
+    name: 'ecomiq:sanitize-html-client-boundary',
+    enforce: 'pre',
+    applyToEnvironment(environment) {
+      return environment.name === 'client'
+    },
+    configEnvironment(name, config) {
+      if (name !== 'client') return
+      const rolldownOptions = config.optimizeDeps?.rolldownOptions ?? {}
+      return {
+        optimizeDeps: {
+          rolldownOptions: {
+            ...rolldownOptions,
+            plugins: [
+              ...(rolldownOptions.plugins ?? []),
+              {
+                name: 'ecomiq:sanitize-html-optimizer-boundary',
+                resolveId: resolveSanitizeHtmlPostcss,
+              },
+            ],
+          },
+        },
+      }
+    },
+    resolveId: resolveSanitizeHtmlPostcss,
+  }
+}
+
+export function createViteConfig({ appDir, config }) {
+  return {
+    root: appDir,
+    configFile: false,
+    publicDir: resolve(appDir, '../public'),
+    plugins: [
+      tailwindcss(),
+      // Emula el runtime de Workers en dev y empaqueta para Cloudflare en build.
+      cloudflare({
+        configPath: resolve(appDir, 'wrangler.jsonc'),
+        viteEnvironment: { name: 'ssr' },
+      }),
+      tanstackStart({
+        srcDirectory: 'src',
+        router: {
+          routesDirectory: 'routes',
+          generatedRouteTree: 'routeTree.gen.ts',
+        },
+      }),
+      sanitizeHtmlClientBoundary(),
+      viteReact(),
+    ],
+    build: {
+      // Un solo CSS; nombre estable → SSR y client apuntan al mismo asset en Workers.
+      cssCodeSplit: false,
+      rollupOptions: {
+        output: {
+          assetFileNames: (assetInfo) => {
+            const name = assetInfo.names?.join('') ?? assetInfo.name ?? ''
+            if (name.endsWith('.css')) return 'assets/styles[extname]'
+            return 'assets/[name]-[hash][extname]'
+          },
+        },
+      },
+    },
+    server: {
+      fs: {
+        // pages/, lib/ y public/ del usuario viven un nivel arriba de .ecomiq
+        allow: ['..'],
+      },
+    },
+  }
+}

package/templates/__root.tsx

@@ -0,0 +1,77 @@
+/* Generado por Ecomiq — no editar. */
+import { useState, type ReactNode } from 'react'
+import { createRootRoute, HeadContent, Scripts, Outlet, Link } from '@tanstack/react-router'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { AppEcomiqProvider } from '@ecomiq/storefront/internal/context'
+import { buildRootHead } from '@ecomiq/storefront/internal/head'
+import { serverApi } from '@ecomiq/storefront'
+import { StorefrontError } from '@ecomiq/storefront/ui'
+import Layout from '../user-layout'
+import publicConfig from '../app-config'
+// Side-effect: Start lo trata como asset del manifest (mismo URL en SSR y client).
+// Evita el FOUC por hashes distintos con `?url` en head().
+import '../styles.css'
+
+export const Route = createRootRoute({
+  loader: () => serverApi.getSettings(),
+  head: () => buildRootHead(publicConfig),
+  component: RootComponent,
+  errorComponent: RootError,
+  notFoundComponent: NotFound,
+})
+
+function RootComponent() {
+  const settings = Route.useLoaderData()
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
+      }),
+  )
+
+  return (
+    <RootDocument language={settings.store.language}>
+      <QueryClientProvider client={queryClient}>
+        <AppEcomiqProvider config={publicConfig} settings={settings}>
+          <Layout config={publicConfig} settings={settings}>
+            <Outlet />
+          </Layout>
+        </AppEcomiqProvider>
+      </QueryClientProvider>
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children, language }: { children: ReactNode; language: string }) {
+  return (
+    <html lang={language} suppressHydrationWarning>
+      <head>
+        <HeadContent />
+      </head>
+      <body className="bg-background text-foreground antialiased">
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+function RootError({ reset }: { reset: () => void }) {
+  return (
+    <RootDocument language="es">
+      <StorefrontError onRetry={reset} />
+    </RootDocument>
+  )
+}
+
+function NotFound() {
+  return (
+    <div className="flex flex-col items-center gap-3 py-24 text-center">
+      <p className="text-6xl font-bold tracking-tight">404</p>
+      <p className="text-muted-foreground">Esta página no existe.</p>
+      <Link to="/" className="text-sm underline underline-offset-4">
+        Volver al inicio
+      </Link>
+    </div>
+  )
+}

package/templates/router.tsx

@@ -0,0 +1,19 @@
+/* Generado por Ecomiq — no editar. */
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  return createRouter({
+    routeTree,
+    defaultPreload: 'intent',
+    defaultPreloadDelay: 200,
+    scrollRestoration: true,
+    defaultStaleTime: 30_000,
+  })
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}