@archbase/components 3.0.25 → 4.0.1

package/src/display/ArchbaseLightbox.tsx

@@ -0,0 +1,279 @@
+import React, { useCallback, useState, createContext, useContext, ReactNode } from 'react';
+import Lightbox, {
+  Slide,
+  SlideImage,
+  ControllerRef,
+  LightboxExternalProps,
+} from 'yet-another-react-lightbox';
+import Zoom from 'yet-another-react-lightbox/plugins/zoom';
+import Thumbnails from 'yet-another-react-lightbox/plugins/thumbnails';
+import Slideshow from 'yet-another-react-lightbox/plugins/slideshow';
+import Fullscreen from 'yet-another-react-lightbox/plugins/fullscreen';
+import Download from 'yet-another-react-lightbox/plugins/download';
+import Counter from 'yet-another-react-lightbox/plugins/counter';
+import Captions from 'yet-another-react-lightbox/plugins/captions';
+
+// Import CSS
+import 'yet-another-react-lightbox/styles.css';
+import 'yet-another-react-lightbox/plugins/thumbnails.css';
+import 'yet-another-react-lightbox/plugins/counter.css';
+import 'yet-another-react-lightbox/plugins/captions.css';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface ArchbaseLightboxSlide {
+  /** URL da imagem */
+  src: string;
+  /** Título da imagem */
+  title?: string;
+  /** Descrição da imagem */
+  description?: string;
+  /** Texto alternativo */
+  alt?: string;
+  /** Largura da imagem (para otimização) */
+  width?: number;
+  /** Altura da imagem (para otimização) */
+  height?: number;
+  /** URL para download (se diferente de src) */
+  downloadUrl?: string;
+  /** Nome do arquivo para download */
+  downloadFilename?: string;
+}
+
+export interface ArchbaseLightboxProps extends Omit<LightboxExternalProps, 'slides' | 'open' | 'close'> {
+  /** Array de slides/imagens */
+  slides: ArchbaseLightboxSlide[];
+  /** Índice inicial do slide */
+  index?: number;
+  /** Se o lightbox está aberto */
+  open: boolean;
+  /** Callback ao fechar */
+  onClose: () => void;
+  /** Habilita zoom */
+  enableZoom?: boolean;
+  /** Habilita thumbnails */
+  enableThumbnails?: boolean;
+  /** Habilita slideshow */
+  enableSlideshow?: boolean;
+  /** Habilita fullscreen */
+  enableFullscreen?: boolean;
+  /** Habilita download */
+  enableDownload?: boolean;
+  /** Mostra contador */
+  showCounter?: boolean;
+  /** Mostra captions (título/descrição) */
+  showCaptions?: boolean;
+  /** Intervalo do slideshow em ms */
+  slideshowDelay?: number;
+  /** Nível máximo de zoom */
+  maxZoomPixelRatio?: number;
+  /** Callback ao mudar de slide */
+  onSlideChange?: (index: number) => void;
+}
+
+// =============================================================================
+// Hook useArchbaseLightbox
+// =============================================================================
+
+export interface UseArchbaseLightboxReturn {
+  /** Se o lightbox está aberto */
+  isOpen: boolean;
+  /** Índice atual */
+  currentIndex: number;
+  /** Slides configurados */
+  slides: ArchbaseLightboxSlide[];
+  /** Abre o lightbox */
+  open: (slides: ArchbaseLightboxSlide[], index?: number) => void;
+  /** Fecha o lightbox */
+  close: () => void;
+  /** Vai para um slide específico */
+  goTo: (index: number) => void;
+  /** Props para passar ao componente */
+  lightboxProps: {
+    slides: ArchbaseLightboxSlide[];
+    index: number;
+    open: boolean;
+    onClose: () => void;
+    onSlideChange: (index: number) => void;
+  };
+}
+
+export function useArchbaseLightbox(): UseArchbaseLightboxReturn {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [slides, setSlides] = useState<ArchbaseLightboxSlide[]>([]);
+
+  const open = useCallback((newSlides: ArchbaseLightboxSlide[], index = 0) => {
+    setSlides(newSlides);
+    setCurrentIndex(index);
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const goTo = useCallback((index: number) => {
+    setCurrentIndex(index);
+  }, []);
+
+  return {
+    isOpen,
+    currentIndex,
+    slides,
+    open,
+    close,
+    goTo,
+    lightboxProps: {
+      slides,
+      index: currentIndex,
+      open: isOpen,
+      onClose: close,
+      onSlideChange: setCurrentIndex,
+    },
+  };
+}
+
+// =============================================================================
+// Context
+// =============================================================================
+
+interface LightboxContextType {
+  open: (slides: ArchbaseLightboxSlide[], index?: number) => void;
+  close: () => void;
+}
+
+const LightboxContext = createContext<LightboxContextType | null>(null);
+
+export function useArchbaseLightboxContext(): LightboxContextType {
+  const context = useContext(LightboxContext);
+  if (!context) {
+    throw new Error('useArchbaseLightboxContext must be used within ArchbaseLightboxProvider');
+  }
+  return context;
+}
+
+// =============================================================================
+// Provider
+// =============================================================================
+
+export interface ArchbaseLightboxProviderProps {
+  children: ReactNode;
+  /** Props padrão para o lightbox */
+  defaultProps?: Partial<ArchbaseLightboxProps>;
+}
+
+export function ArchbaseLightboxProvider({ children, defaultProps }: ArchbaseLightboxProviderProps) {
+  const lightbox = useArchbaseLightbox();
+
+  return (
+    <LightboxContext.Provider value={{ open: lightbox.open, close: lightbox.close }}>
+      {children}
+      <ArchbaseLightbox {...defaultProps} {...lightbox.lightboxProps} />
+    </LightboxContext.Provider>
+  );
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function ArchbaseLightbox({
+  slides,
+  index = 0,
+  open,
+  onClose,
+  enableZoom = true,
+  enableThumbnails = true,
+  enableSlideshow = false,
+  enableFullscreen = true,
+  enableDownload = false,
+  showCounter = true,
+  showCaptions = true,
+  slideshowDelay = 3000,
+  maxZoomPixelRatio = 4,
+  onSlideChange,
+  ...rest
+}: ArchbaseLightboxProps) {
+  // Converte slides para o formato do lightbox
+  const lightboxSlides: Slide[] = slides.map((slide) => ({
+    src: slide.src,
+    alt: slide.alt,
+    width: slide.width,
+    height: slide.height,
+    title: slide.title,
+    description: slide.description,
+    download: slide.downloadUrl
+      ? { url: slide.downloadUrl, filename: slide.downloadFilename }
+      : undefined,
+  }));
+
+  // Configura plugins baseado nas props
+  const plugins = [];
+  if (enableZoom) plugins.push(Zoom);
+  if (enableThumbnails) plugins.push(Thumbnails);
+  if (enableSlideshow) plugins.push(Slideshow);
+  if (enableFullscreen) plugins.push(Fullscreen);
+  if (enableDownload) plugins.push(Download);
+  if (showCounter) plugins.push(Counter);
+  if (showCaptions) plugins.push(Captions);
+
+  const handleViewChange = useCallback(
+    ({ index: newIndex }: { index: number }) => {
+      onSlideChange?.(newIndex);
+    },
+    [onSlideChange]
+  );
+
+  return (
+    <Lightbox
+      open={open}
+      close={onClose}
+      index={index}
+      slides={lightboxSlides}
+      plugins={plugins}
+      on={{ view: handleViewChange }}
+      zoom={{
+        maxZoomPixelRatio,
+        scrollToZoom: true,
+      }}
+      slideshow={{
+        delay: slideshowDelay,
+        autoplay: false,
+      }}
+      thumbnails={{
+        position: 'bottom',
+        width: 120,
+        height: 80,
+        border: 2,
+        borderRadius: 4,
+        padding: 4,
+        gap: 8,
+      }}
+      carousel={{
+        finite: false,
+        preload: 2,
+        padding: '16px',
+      }}
+      animation={{
+        fade: 250,
+        swipe: 250,
+      }}
+      controller={{
+        closeOnPullDown: true,
+        closeOnBackdropClick: true,
+      }}
+      {...rest}
+    />
+  );
+}
+
+ArchbaseLightbox.displayName = 'ArchbaseLightbox';
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export default ArchbaseLightbox;

package/src/display/ArchbaseMarquee.tsx

@@ -0,0 +1,268 @@
+import React, { ReactNode, CSSProperties, useRef, useEffect, useState } from 'react';
+import { Box, BoxProps, useMantineTheme } from '@mantine/core';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type MarqueeDirection = 'left' | 'right' | 'up' | 'down';
+
+export interface ArchbaseMarqueeProps extends Omit<BoxProps, 'children'> {
+  /** Conteúdo a ser animado */
+  children: ReactNode;
+  /** Direção do movimento */
+  direction?: MarqueeDirection;
+  /** Velocidade em pixels por segundo */
+  speed?: number;
+  /** Pausar ao passar o mouse */
+  pauseOnHover?: boolean;
+  /** Pausar ao clicar */
+  pauseOnClick?: boolean;
+  /** Número de cópias do conteúdo (para loop contínuo) */
+  copies?: number;
+  /** Gap entre as cópias */
+  gap?: number;
+  /** Gradient fade nas bordas */
+  gradient?: boolean;
+  /** Largura do gradient em pixels */
+  gradientWidth?: number;
+  /** Cor do gradient (background) */
+  gradientColor?: string;
+  /** Desabilitar animação */
+  disabled?: boolean;
+  /** Delay antes de iniciar (ms) */
+  delay?: number;
+}
+
+// =============================================================================
+// Keyframes CSS
+// =============================================================================
+
+const getKeyframes = (direction: MarqueeDirection, distance: number): string => {
+  const name = `marquee-${direction}-${Math.abs(distance)}`;
+
+  switch (direction) {
+    case 'left':
+      return `
+        @keyframes ${name} {
+          from { transform: translateX(0); }
+          to { transform: translateX(-${distance}px); }
+        }
+      `;
+    case 'right':
+      return `
+        @keyframes ${name} {
+          from { transform: translateX(-${distance}px); }
+          to { transform: translateX(0); }
+        }
+      `;
+    case 'up':
+      return `
+        @keyframes ${name} {
+          from { transform: translateY(0); }
+          to { transform: translateY(-${distance}px); }
+        }
+      `;
+    case 'down':
+      return `
+        @keyframes ${name} {
+          from { transform: translateY(-${distance}px); }
+          to { transform: translateY(0); }
+        }
+      `;
+  }
+};
+
+// =============================================================================
+// ArchbaseMarquee Component
+// =============================================================================
+
+export function ArchbaseMarquee({
+  children,
+  direction = 'left',
+  speed = 50,
+  pauseOnHover = true,
+  pauseOnClick = false,
+  copies = 2,
+  gap = 40,
+  gradient = true,
+  gradientWidth = 50,
+  gradientColor,
+  disabled = false,
+  delay = 0,
+  ...boxProps
+}: ArchbaseMarqueeProps) {
+  const theme = useMantineTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentSize, setContentSize] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  const isHorizontal = direction === 'left' || direction === 'right';
+
+  // Measure content size
+  useEffect(() => {
+    if (contentRef.current) {
+      const size = isHorizontal
+        ? contentRef.current.offsetWidth
+        : contentRef.current.offsetHeight;
+      setContentSize(size + gap);
+
+      // Add small delay before showing animation
+      const timer = setTimeout(() => setIsReady(true), delay);
+      return () => clearTimeout(timer);
+    }
+  }, [children, isHorizontal, gap, delay]);
+
+  // Calculate animation duration based on speed
+  const duration = contentSize / speed;
+
+  // Generate keyframes
+  const keyframeName = `marquee-${direction}-${contentSize}`;
+  const keyframesCss = contentSize > 0 ? getKeyframes(direction, contentSize) : '';
+
+  // Gradient styles
+  const bgColor = gradientColor ?? theme.colors.dark[7];
+  const gradientStyle: CSSProperties = gradient
+    ? {
+        maskImage: isHorizontal
+          ? `linear-gradient(to right, transparent, black ${gradientWidth}px, black calc(100% - ${gradientWidth}px), transparent)`
+          : `linear-gradient(to bottom, transparent, black ${gradientWidth}px, black calc(100% - ${gradientWidth}px), transparent)`,
+        WebkitMaskImage: isHorizontal
+          ? `linear-gradient(to right, transparent, black ${gradientWidth}px, black calc(100% - ${gradientWidth}px), transparent)`
+          : `linear-gradient(to bottom, transparent, black ${gradientWidth}px, black calc(100% - ${gradientWidth}px), transparent)`,
+      }
+    : {};
+
+  // Container styles
+  const containerStyle: CSSProperties = {
+    overflow: 'hidden',
+    ...gradientStyle,
+  };
+
+  // Track styles
+  const trackStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: isHorizontal ? 'row' : 'column',
+    gap: gap,
+    width: isHorizontal ? 'max-content' : '100%',
+    animation:
+      disabled || !isReady || contentSize === 0
+        ? 'none'
+        : `${keyframeName} ${duration}s linear infinite`,
+    animationPlayState: isPaused ? 'paused' : 'running',
+  };
+
+  // Event handlers
+  const handleMouseEnter = () => {
+    if (pauseOnHover) setIsPaused(true);
+  };
+
+  const handleMouseLeave = () => {
+    if (pauseOnHover) setIsPaused(false);
+  };
+
+  const handleClick = () => {
+    if (pauseOnClick) setIsPaused(!isPaused);
+  };
+
+  // Render copies
+  const renderCopies = () => {
+    const items = [];
+    for (let i = 0; i < copies; i++) {
+      items.push(
+        <Box key={i} ref={i === 0 ? contentRef : undefined}>
+          {children}
+        </Box>
+      );
+    }
+    return items;
+  };
+
+  return (
+    <>
+      {/* Inject keyframes */}
+      {keyframesCss && (
+        <style dangerouslySetInnerHTML={{ __html: keyframesCss }} />
+      )}
+
+      <Box
+        ref={containerRef}
+        style={containerStyle}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+        {...boxProps}
+      >
+        <Box style={trackStyle}>{renderCopies()}</Box>
+      </Box>
+    </>
+  );
+}
+
+// =============================================================================
+// Convenience Components
+// =============================================================================
+
+/** Marquee horizontal da esquerda para direita */
+export function ArchbaseMarqueeLeft(
+  props: Omit<ArchbaseMarqueeProps, 'direction'>
+) {
+  return <ArchbaseMarquee direction="left" {...props} />;
+}
+
+/** Marquee horizontal da direita para esquerda */
+export function ArchbaseMarqueeRight(
+  props: Omit<ArchbaseMarqueeProps, 'direction'>
+) {
+  return <ArchbaseMarquee direction="right" {...props} />;
+}
+
+/** Marquee vertical de cima para baixo */
+export function ArchbaseMarqueeUp(
+  props: Omit<ArchbaseMarqueeProps, 'direction'>
+) {
+  return <ArchbaseMarquee direction="up" {...props} />;
+}
+
+/** Marquee vertical de baixo para cima */
+export function ArchbaseMarqueeDown(
+  props: Omit<ArchbaseMarqueeProps, 'direction'>
+) {
+  return <ArchbaseMarquee direction="down" {...props} />;
+}
+
+// =============================================================================
+// ArchbaseTextTicker (ticker de notícias)
+// =============================================================================
+
+export interface ArchbaseTextTickerProps extends Omit<ArchbaseMarqueeProps, 'children'> {
+  /** Array de textos */
+  items: string[];
+  /** Separador entre itens */
+  separator?: ReactNode;
+}
+
+export function ArchbaseTextTicker({
+  items,
+  separator = ' • ',
+  ...props
+}: ArchbaseTextTickerProps) {
+  return (
+    <ArchbaseMarquee {...props}>
+      <Box style={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}>
+        {items.map((item, index) => (
+          <React.Fragment key={index}>
+            <span>{item}</span>
+            {index < items.length - 1 && (
+              <span style={{ margin: '0 8px', opacity: 0.5 }}>{separator}</span>
+            )}
+          </React.Fragment>
+        ))}
+      </Box>
+    </ArchbaseMarquee>
+  );
+}
+
+export default ArchbaseMarquee;