@etus/ui 0.1.1 → 0.1.3

package/src/components/data-display/ImageGallery/ImageGallery.types.ts

@@ -1,109 +0,0 @@
-"use client"
-
-import type * as React from "react"
-
-/**
- * Individual image item in the gallery
- */
-export interface ImageItem {
-  /** Alt text for accessibility (required) */
-  alt: string
-  /** Caption text for lightbox display */
-  caption?: string
-  /** Image height for masonry layout calculations */
-  height?: number
-  /** Unique identifier for the image */
-  id: string
-  /** Additional metadata for the image */
-  metadata?: Record<string, unknown>
-  /** Image source URL */
-  src: string
-  /** Optional thumbnail URL for grid display */
-  thumbnail?: string
-  /** Image width for masonry layout calculations */
-  width?: number
-}
-
-/**
- * Responsive column configuration by breakpoint
- */
-export interface ResponsiveColumns {
-  /** Desktop (1024-1280px) */
-  lg?: number
-  /** Tablet (640-1024px) */
-  md?: number
-  /** Mobile (< 640px) */
-  sm?: number
-  /** Wide (> 1280px) */
-  xl?: number
-}
-
-/**
- * Gallery layout options
- */
-export type ImageGalleryLayout = "carousel" | "featured" | "grid" | "masonry"
-
-/**
- * Gap size options
- */
-export type ImageGalleryGap = "lg" | "md" | "sm"
-
-/**
- * ImageGallery component props
- */
-export interface ImageGalleryProps extends React.ComponentProps<"div"> {
-  /** Aspect ratio for images (1 = square) */
-  aspectRatio?: number
-  /** Number of columns or responsive configuration */
-  columns?: number | ResponsiveColumns
-  /** Enable lightbox on image click */
-  enableLightbox?: boolean
-  /** Enable selection mode */
-  enableSelection?: boolean
-  /** Gap between images */
-  gap?: ImageGalleryGap
-  /** Array of images to display (required) */
-  images: ImageItem[]
-  /** Layout type for the gallery */
-  layout?: ImageGalleryLayout
-  /** Show loading skeletons */
-  loading?: boolean
-  /** Maximum number of selections allowed */
-  maxSelection?: number
-  /** Callback when an image is clicked */
-  onImageClick?: (image: ImageItem, index: number) => void
-  /** Callback when an image fails to load */
-  onImageError?: (image: ImageItem, error: Error) => void
-  /** Callback when an image loads successfully */
-  onImageLoad?: (image: ImageItem) => void
-  /** Callback for infinite scroll */
-  onLoadMore?: () => void
-  /** Callback when selection changes */
-  onSelectionChange?: (selectedIds: string[]) => void
-  /** Array of selected image IDs (controlled) */
-  selectedIds?: string[]
-}
-
-/**
- * ImageGalleryItem component props
- */
-export interface ImageGalleryItemProps extends React.ComponentProps<"button"> {
-  /** Aspect ratio for the image */
-  aspectRatio?: number
-  /** Whether lightbox is enabled */
-  enableLightbox?: boolean
-  /** Whether selection mode is enabled */
-  enableSelection?: boolean
-  /** The image data */
-  image: ImageItem
-  /** Index in the gallery */
-  index: number
-  /** Whether this item is selected */
-  isSelected?: boolean
-  /** Callback when clicked */
-  onClick?: () => void
-  /** Callback when image fails to load */
-  onImageError?: (error: Error) => void
-  /** Callback when image loads */
-  onImageLoad?: () => void
-}

package/src/components/data-display/ImageGallery/ImageGallery.variants.ts

@@ -1,58 +0,0 @@
-// ImageGallery/ImageGallery.variants.ts
-import { cva, type VariantProps } from "class-variance-authority"
-
-/**
- * ImageGallery item style variants using CVA
- *
- * @see https://cva.style/docs
- */
-export const imageGalleryItemVariants = cva(
-  // Base styles (always applied)
-  [
-    "relative overflow-hidden rounded-md",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-    "transition-transform duration-200",
-    "cursor-pointer",
-  ].join(" "),
-  {
-    variants: {
-      selected: {
-        true: "ring-2 ring-primary ring-offset-2",
-        false: "",
-      },
-      interactive: {
-        true: "hover:scale-[1.02]",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      selected: false,
-      interactive: true,
-    },
-  }
-)
-
-/**
- * ImageGallery gap configuration
- */
-export const imageGalleryGapClasses = {
-  sm: "gap-2",
-  md: "gap-4",
-  lg: "gap-6",
-} as const
-
-/**
- * ImageGallery layout configuration
- */
-export const imageGalleryLayouts = {
-  grid: "grid",
-  masonry: "masonry",
-  carousel: "carousel",
-  featured: "featured",
-} as const
-
-export type ImageGalleryGap = keyof typeof imageGalleryGapClasses
-export type ImageGalleryLayout = keyof typeof imageGalleryLayouts
-
-// Export variant prop types
-export type ImageGalleryItemVariantProps = VariantProps<typeof imageGalleryItemVariants>

package/src/components/data-display/ImageGallery/README.md

@@ -1,352 +0,0 @@
-# ImageGallery
-
-## Visão Geral
-
-O ImageGallery e um componente para exibir colecoes de imagens em layouts de grid responsivos. Suporta diferentes arranjos, lazy loading, e integracao com Lightbox para visualizacao em tela cheia.
-
-### Classificacao Atomica
-- **Categoria**: Organisms
-- **Subcategoria**: Data Display / Media
-
-### Casos de Uso Comuns
-- Galerias de produtos
-- Portfolios
-- Albums de fotos
-- Grids de midia
-- Thumbnails de arquivos
-- Showrooms visuais
-
-### Relacao com Outros Componentes
-- **Lightbox**: Visualizacao em tela cheia
-- **Carousel**: Navegacao sequencial
-- **Image**: Componente base de imagem
-- **AspectRatio**: Proporcoes consistentes
-
-## Design Specs
-
-### Layouts
-
-| Layout | Descricao |
-|--------|-----------|
-| `grid` | Grid uniforme (padrao) |
-| `masonry` | Alturas variadas |
-| `featured` | Uma imagem grande + thumbnails |
-| `carousel` | Slide horizontal |
-
-### Colunas Responsivas
-
-| Breakpoint | Colunas |
-|------------|---------|
-| Mobile | 2 |
-| Tablet | 3 |
-| Desktop | 4 |
-| Wide | 6 |
-
-### Estados
-
-- **Default**: Imagens carregadas
-- **Loading**: Skeleton/blur placeholder
-- **Error**: Fallback de erro
-- **Selected**: Imagem selecionada
-
-### Tokens de Design
-
-#### Espacamento
-- Gap: `gap-2` (sm), `gap-4` (md), `gap-6` (lg)
-- Padding interno: Variavel por layout
-
-#### Bordas
-- Image Radius: `rounded-md`
-- Container Radius: `rounded-lg`
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `images` | `ImageItem[]` | - | Array de imagens |
-| `layout` | `"grid" \| "masonry" \| "featured" \| "carousel"` | `"grid"` | Layout |
-| `columns` | `number \| ResponsiveColumns` | `{ sm: 2, md: 3, lg: 4 }` | Colunas |
-| `gap` | `"sm" \| "md" \| "lg"` | `"md"` | Espacamento |
-| `aspectRatio` | `number` | `1` | Proporcao (1 = quadrado) |
-| `enableLightbox` | `boolean` | `true` | Abrir em lightbox |
-| `onImageClick` | `(image: ImageItem, index: number) => void` | - | Callback click |
-| `className` | `string` | `""` | Classes adicionais |
-
-### Interface ImageItem
-
-```typescript
-interface ImageItem {
-  id: string
-  src: string
-  alt: string
-  thumbnail?: string
-  width?: number
-  height?: number
-  caption?: string
-  metadata?: Record<string, unknown>
-}
-```
-
-## Exemplos
-
-### Uso Básico
-
-```tsx
-import { ImageGallery } from '@etus/ui'
-
-const images = [
-  { id: '1', src: '/img1.jpg', alt: 'Image 1' },
-  { id: '2', src: '/img2.jpg', alt: 'Image 2' },
-  { id: '3', src: '/img3.jpg', alt: 'Image 3' },
-  { id: '4', src: '/img4.jpg', alt: 'Image 4' },
-]
-
-function BasicGallery() {
-  return <ImageGallery images={images} />
-}
-```
-
-### Grid com Colunas Customizadas
-
-```tsx
-function CustomColumnsGallery() {
-  return (
-    <ImageGallery
-      images={images}
-      columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}
-      gap="lg"
-    />
-  )
-}
-```
-
-### Layout Featured
-
-```tsx
-function FeaturedGallery() {
-  return (
-    <ImageGallery
-      images={images}
-      layout="featured"
-    />
-  )
-}
-
-// Renderiza primeira imagem grande com thumbnails ao lado/abaixo
-```
-
-### Layout Masonry
-
-```tsx
-function MasonryGallery() {
-  const imagesWithDimensions = [
-    { id: '1', src: '/img1.jpg', alt: 'Tall', width: 400, height: 600 },
-    { id: '2', src: '/img2.jpg', alt: 'Wide', width: 800, height: 400 },
-    { id: '3', src: '/img3.jpg', alt: 'Square', width: 400, height: 400 },
-  ]
-
-  return (
-    <ImageGallery
-      images={imagesWithDimensions}
-      layout="masonry"
-    />
-  )
-}
-```
-
-### Com Lightbox
-
-```tsx
-function GalleryWithLightbox() {
-  return (
-    <ImageGallery
-      images={images}
-      enableLightbox
-      onImageClick={(image, index) => {
-        console.log(`Clicked image ${index}:`, image)
-      }}
-    />
-  )
-}
-```
-
-### Galeria de Produtos
-
-```tsx
-function ProductGallery({ product }) {
-  const [selected, setSelected] = useState(0)
-
-  return (
-    <div className="space-y-4">
-      <div className="aspect-square overflow-hidden rounded-lg">
-        <img
-          src={product.images[selected].src}
-          alt={product.images[selected].alt}
-          className="w-full h-full object-cover"
-        />
-      </div>
-      <ImageGallery
-        images={product.images}
-        layout="grid"
-        columns={4}
-        gap="sm"
-        enableLightbox={false}
-        onImageClick={(_, index) => setSelected(index)}
-      />
-    </div>
-  )
-}
-```
-
-### Implementacao
-
-```tsx
-import { cn } from '@/lib/utils'
-import { AspectRatio } from '@etus/ui'
-import { useState } from 'react'
-
-interface ImageGalleryProps {
-  images: ImageItem[]
-  layout?: 'grid' | 'masonry' | 'featured'
-  columns?: number | { sm?: number; md?: number; lg?: number; xl?: number }
-  gap?: 'sm' | 'md' | 'lg'
-  aspectRatio?: number
-  enableLightbox?: boolean
-  onImageClick?: (image: ImageItem, index: number) => void
-  className?: string
-}
-
-const gapClasses = {
-  sm: 'gap-2',
-  md: 'gap-4',
-  lg: 'gap-6',
-}
-
-function ImageGallery({
-  images,
-  layout = 'grid',
-  columns = { sm: 2, md: 3, lg: 4 },
-  gap = 'md',
-  aspectRatio = 1,
-  enableLightbox = true,
-  onImageClick,
-  className,
-}: ImageGalleryProps) {
-  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)
-
-  const handleClick = (image: ImageItem, index: number) => {
-    if (enableLightbox) {
-      setLightboxIndex(index)
-    }
-    onImageClick?.(image, index)
-  }
-
-  const columnClass = typeof columns === 'number'
-    ? `grid-cols-${columns}`
-    : cn(
-        columns.sm && `grid-cols-${columns.sm}`,
-        columns.md && `md:grid-cols-${columns.md}`,
-        columns.lg && `lg:grid-cols-${columns.lg}`,
-        columns.xl && `xl:grid-cols-${columns.xl}`,
-      )
-
-  return (
-    <>
-      <div className={cn('grid', columnClass, gapClasses[gap], className)}>
-        {images.map((image, index) => (
-          <button
-            key={image.id}
-            onClick={() => handleClick(image, index)}
-            className="overflow-hidden rounded-md focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <AspectRatio ratio={aspectRatio}>
-              <img
-                src={image.thumbnail || image.src}
-                alt={image.alt}
-                loading="lazy"
-                className="w-full h-full object-cover transition-transform hover:scale-105"
-              />
-            </AspectRatio>
-          </button>
-        ))}
-      </div>
-
-      {enableLightbox && lightboxIndex !== null && (
-        <Lightbox
-          images={images}
-          initialIndex={lightboxIndex}
-          onClose={() => setLightboxIndex(null)}
-        />
-      )}
-    </>
-  )
-}
-
-export { ImageGallery }
-```
-
-## Acessibilidade (A11y)
-
-### Atributos
-- Cada imagem com `alt` descritivo
-- Botoes focaveis com outline
-- Keyboard navigation no lightbox
-
-### ARIA
-- `role="group"` no container
-- `aria-label` descritivo
-
-### Navegacao
-- `Tab`: Navega entre imagens
-- `Enter/Space`: Abre lightbox
-- `Escape`: Fecha lightbox
-- `Arrow Keys`: Navega no lightbox
-
-## Testes
-
-```typescript
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { ImageGallery } from './ImageGallery'
-
-describe('ImageGallery', () => {
-  const images = [
-    { id: '1', src: '/img1.jpg', alt: 'Image 1' },
-    { id: '2', src: '/img2.jpg', alt: 'Image 2' },
-  ]
-
-  it('renders all images', () => {
-    render(<ImageGallery images={images} />)
-
-    expect(screen.getByAltText('Image 1')).toBeInTheDocument()
-    expect(screen.getByAltText('Image 2')).toBeInTheDocument()
-  })
-
-  it('calls onImageClick when image clicked', async () => {
-    const onImageClick = vi.fn()
-    const user = userEvent.setup()
-
-    render(<ImageGallery images={images} onImageClick={onImageClick} />)
-
-    await user.click(screen.getByAltText('Image 1'))
-    expect(onImageClick).toHaveBeenCalledWith(images[0], 0)
-  })
-
-  it('opens lightbox when enabled', async () => {
-    const user = userEvent.setup()
-
-    render(<ImageGallery images={images} enableLightbox />)
-
-    await user.click(screen.getByAltText('Image 1'))
-    expect(screen.getByRole('dialog')).toBeInTheDocument()
-  })
-})
-```
-
-## Referências
-
-- [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) (para Lightbox)
-- [Masonry Layout CSS](https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/)
-- [PhotoSwipe](https://photoswipe.com/) (inspiracao)

package/src/components/data-display/ImageGallery/index.ts

@@ -1,9 +0,0 @@
-export type {
-  ImageGalleryGap,
-  ImageGalleryItemProps,
-  ImageGalleryLayout,
-  ImageGalleryProps,
-  ImageItem,
-  ResponsiveColumns,
-} from "./ImageGallery.types"
-export { ImageGallery, ImageGalleryItem } from "./ImageGallery"