@ecomiq/storefront 2.1.3 → 3.0.0

package/src/storefront-layout.ts

@@ -1,59 +0,0 @@
-import { useRouterState } from '@tanstack/react-router'
-import {
-  StorefrontDefinitionSchema,
-  resolveStorefrontRoute,
-  type StorefrontDefinition,
-  type StorefrontPage,
-} from '@ecomiq/storefront-definition'
-
-export type StorefrontDefinitionRoute = {
-  definition: StorefrontDefinition
-  page: StorefrontPage
-}
-
-export function definitionRouteFor(
-  pathname: string,
-  loaderData: unknown,
-): StorefrontDefinitionRoute | null {
-  if (loaderData === null || typeof loaderData !== 'object') {
-    return null
-  }
-  if (!('kind' in loaderData) || loaderData.kind !== 'definition') {
-    return null
-  }
-  if (!('definition' in loaderData)) {
-    return null
-  }
-
-  const parsed = StorefrontDefinitionSchema.safeParse(loaderData.definition)
-  if (!parsed.success) return null
-
-  const resolution = resolveStorefrontRoute(pathname, parsed.data.pages)
-  if (resolution.kind !== 'page') return null
-  const page = parsed.data.pages.find(
-    (candidate) => candidate.id === resolution.pageId,
-  )
-  if (!page) return null
-  return { definition: parsed.data, page }
-}
-
-export function definitionForRoute(
-  pathname: string,
-  loaderData: unknown,
-): StorefrontDefinition | null {
-  return definitionRouteFor(pathname, loaderData)?.definition ?? null
-}
-
-export function useDefinitionRoute(): StorefrontDefinitionRoute | null {
-  return useRouterState({
-    select: (state) =>
-      definitionRouteFor(
-        state.location.pathname,
-        state.matches.at(-1)?.loaderData,
-      ),
-  })
-}
-
-export function useDefinition(): StorefrontDefinition | null {
-  return useDefinitionRoute()?.definition ?? null
-}

package/src/storefront-runtime.ts

@@ -1,173 +0,0 @@
-import {
-  CloudRuntimeStoreSlugSchema,
-  getCloudRuntimeClient,
-  type ActiveStorefrontRuntime,
-} from './cloud-runtime-client'
-import { getStorefrontClient } from './client'
-import {
-  getServerConfig,
-  type ServerEcomiqConfig,
-} from './server-config-store'
-import {
-  resolveStorefrontRoute,
-  type StorefrontDefinition,
-  type StorefrontPage,
-} from '@ecomiq/storefront-definition'
-import { storefrontPageFor } from './storefront-definition/renderer'
-import {
-  emptyRendererData,
-  resolveStorefrontDefinitionData,
-  type ResolvedStorefrontDefinitionData,
-  type StorefrontRuntimeCatalogClient,
-} from './storefront-definition/data'
-
-export {
-  resolveStorefrontDefinitionData,
-  type ResolvedStorefrontDefinitionData,
-  type StorefrontRuntimeCatalogClient,
-} from './storefront-definition/data'
-
-export interface StorefrontRuntimeCloudClient {
-  resolveActiveStorefront(
-    storeSlug: string,
-  ): Promise<ActiveStorefrontRuntime | null>
-}
-
-export type ActiveStorefrontHome =
-  | {
-      kind: 'legacy'
-    }
-  | {
-      kind: 'definition'
-      definition: StorefrontDefinition
-      page: StorefrontPage
-      publication: ActiveStorefrontRuntime['publication']
-      data: ResolvedStorefrontDefinitionData
-    }
-
-export type ActiveStorefrontPage =
-  | {
-      kind: 'unpublished'
-    }
-  | {
-      kind: 'not-found'
-    }
-  | {
-      kind: 'definition'
-      definition: StorefrontDefinition
-      page: StorefrontPage
-      publication: ActiveStorefrontRuntime['publication']
-      data: ResolvedStorefrontDefinitionData
-    }
-
-export function deriveCloudStoreSlug(domain: string): string | null {
-  const normalized = domain.trim().toLowerCase()
-  if (!normalized) return null
-
-  let hostname: string
-  try {
-    hostname = new URL(
-      normalized.includes('://') ? normalized : `https://${normalized}`,
-    ).hostname
-  } catch {
-    return null
-  }
-
-  const candidate = hostname.split('.')[0] ?? ''
-  const parsed = CloudRuntimeStoreSlugSchema.safeParse(candidate)
-  return parsed.success ? parsed.data : null
-}
-
-export interface LoadActiveStorefrontHomeDependencies {
-  config?: ServerEcomiqConfig
-  cloudClient?: StorefrontRuntimeCloudClient
-  catalogClient?: StorefrontRuntimeCatalogClient
-}
-
-async function resolveActiveRuntime(
-  dependencies: LoadActiveStorefrontHomeDependencies,
-): Promise<ActiveStorefrontRuntime | null> {
-  const config = dependencies.config ?? getServerConfig()
-  const cloudConfig = config.cloud
-  if (!cloudConfig?.baseUrl) return null
-
-  const storeSlug =
-    cloudConfig.storeSlug ?? deriveCloudStoreSlug(config.domain)
-  if (!storeSlug) return null
-
-  const cloudClient =
-    dependencies.cloudClient ??
-    getCloudRuntimeClient({
-      baseUrl: cloudConfig.baseUrl,
-      artifactBaseUrl: cloudConfig.artifactBaseUrl,
-      timeoutMs: cloudConfig.timeoutMs,
-      cacheTtlMs: cloudConfig.cacheTtlMs,
-    })
-
-  try {
-    return await cloudClient.resolveActiveStorefront(storeSlug)
-  } catch {
-    return null
-  }
-}
-
-export async function loadActiveStorefrontHome(
-  dependencies: LoadActiveStorefrontHomeDependencies = {},
-): Promise<ActiveStorefrontHome> {
-  const runtime = await resolveActiveRuntime(dependencies)
-  if (!runtime) return { kind: 'legacy' }
-
-  const page = storefrontPageFor(runtime.definition)
-  if (!page) return { kind: 'legacy' }
-
-  const catalogClient =
-    dependencies.catalogClient ?? getStorefrontClient()
-  const data = await resolveStorefrontDefinitionData(
-    runtime.definition,
-    catalogClient,
-    page.id,
-  ).catch(emptyRendererData)
-
-  return {
-    kind: 'definition',
-    definition: runtime.definition,
-    page,
-    publication: runtime.publication,
-    data,
-  }
-}
-
-export async function loadActiveStorefrontPage(
-  pathname: string,
-  dependencies: LoadActiveStorefrontHomeDependencies = {},
-): Promise<ActiveStorefrontPage> {
-  const runtime = await resolveActiveRuntime(dependencies)
-  if (!runtime) return { kind: 'unpublished' }
-
-  const resolution = resolveStorefrontRoute(
-    pathname,
-    runtime.definition.pages,
-  )
-  if (resolution.kind !== 'page') return { kind: 'not-found' }
-
-  const page = runtime.definition.pages.find(
-    (candidate) => candidate.id === resolution.pageId,
-  )
-  if (!page) return { kind: 'not-found' }
-
-  const catalogClient =
-    dependencies.catalogClient ?? getStorefrontClient()
-  const data = await resolveStorefrontDefinitionData(
-    runtime.definition,
-    catalogClient,
-    page.id,
-  ).catch(emptyRendererData)
-
-  return {
-    kind: 'definition',
-    definition: runtime.definition,
-    page,
-    publication: runtime.publication,
-    data,
-  }
-}

package/src/styles.css

@@ -1,97 +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 './storefront-definition';
-@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;
-  }
-}
-
-.storefront-definition {
-  font-family: var(--storefront-font-body);
-  --storefront-content-width: 72rem;
-}
-
-.storefront-definition :where(h1, h2, h3, h4, h5, h6) {
-  font-family: var(--storefront-font-heading);
-}
-
-.storefront-definition-section {
-  padding-block: var(
-      --storefront-section-padding-top,
-      var(--storefront-section-padding)
-    )
-    var(
-      --storefront-section-padding-bottom,
-      var(--storefront-section-padding)
-    );
-}

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} />
-}