@ecomiq/storefront 2.1.4 → 3.0.0

package/src/styles.css

@@ -1,76 +0,0 @@
-/* Design system de Ecomiq — Tailwind v4 + tokens estilo shadcn.
- * `source(...)` fija el scan para que client y SSR generen el mismo CSS/hash. */
-@import 'tailwindcss' source('./');
-
-/* Escanear los componentes UI del propio framework */
-@source './ui';
-@source './components';
-@source './runtime';
-@source './pages';
-@source '../templates';
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-}
-
-:root {
-  --background: oklch(0.99 0.003 90);
-  --foreground: oklch(0.2 0.02 260);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.2 0.02 260);
-  --primary: oklch(0.45 0.15 165);
-  --primary-foreground: oklch(0.98 0.01 165);
-  --secondary: oklch(0.96 0.01 165);
-  --secondary-foreground: oklch(0.3 0.05 165);
-  --muted: oklch(0.96 0.005 90);
-  --muted-foreground: oklch(0.5 0.02 260);
-  --accent: oklch(0.94 0.03 165);
-  --accent-foreground: oklch(0.3 0.05 165);
-  --destructive: oklch(0.55 0.2 25);
-  --destructive-foreground: oklch(0.98 0.01 25);
-  --border: oklch(0.91 0.005 90);
-  --input: oklch(0.91 0.005 90);
-  --ring: oklch(0.45 0.15 165);
-  --radius: 0.625rem;
-}
-
-* {
-  border-color: var(--border);
-}
-
-::selection {
-  background: var(--accent);
-}
-
-:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}

package/src/ui/badge.tsx

@@ -1,32 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from './cn'
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        outline: 'text-foreground',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground',
-      },
-    },
-    defaultVariants: { variant: 'default' },
-  },
-)
-
-export interface BadgeProps
-  extends Omit<ComponentProps<'span'>, 'children'>,
-    VariantProps<typeof badgeVariants> {
-  children?: ReactNode
-}
-
-export function Badge({ className, variant, children, ...props }: BadgeProps) {
-  return (
-    <span className={cn(badgeVariants({ variant }), className)} {...props}>
-      {children}
-    </span>
-  )
-}

package/src/ui/button.tsx

@@ -1,31 +0,0 @@
-import type { ComponentProps } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from './cn'
-
-export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: { variant: 'default', size: 'default' },
-  },
-)
-
-export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {}
-
-export function Button({ className, variant, size, type = 'button', ...props }: ButtonProps) {
-  return <button type={type} className={cn(buttonVariants({ variant, size }), className)} {...props} />
-}

package/src/ui/card.tsx

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

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

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

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

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

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

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

@@ -1,36 +0,0 @@
-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;
-}