@soyfri/shared-library 2.0.0-beta.17 → 2.0.0-beta.18

package/src/components/Flyout/Flyout.tsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import {
+  Box,
+  Typography,
+  IconButton,
+  Divider,
+  Drawer,
+  List,
+  ListItem,
+  ListItemText,
+  TextField,
+  Button,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+// Define the size types for the Flyout
+type FlyoutSize = 'small' | 'medium' | 'large';
+
+// Define the props for the Flyout component
+export interface FlyoutProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  anchor?: 'left' | 'top' | 'right' | 'bottom';
+  children: React.ReactNode;
+  size?: FlyoutSize; // New prop for predefined size
+  height?: string | number; // Allows custom height for top/bottom anchors
+}
+
+const Flyout: React.FC<FlyoutProps> = ({
+  open,
+  onClose,
+  title,
+  anchor = 'right',
+  children,
+  size = 'medium', // Default size: 'medium'
+  height = 'auto',
+}) => {
+  // Mapping of predefined sizes to pixel widths
+  const getWidthBySize = (flyoutSize: FlyoutSize): number => {
+    const baseMultiplier = 1.15; // 15% larger than base
+    switch (flyoutSize) {
+      case 'small':
+        return Math.round(300 * baseMultiplier); // ~345px
+      case 'medium':
+        return Math.round(450 * baseMultiplier); // ~518px (rounded)
+      case 'large':
+        return Math.round(600 * baseMultiplier); // ~690px
+      default:
+        return Math.round(450 * baseMultiplier); // Fallback, ~518px
+    }
+  };
+
+  // Calculate width based on size prop for left/right anchors
+  const calculatedWidth = getWidthBySize(size);
+
+  // Determine the style for the content box based on anchor
+  const contentStyle = useMemo(() => {
+    if (anchor === 'left' || anchor === 'right') {
+      return { width: calculatedWidth }; // Use the calculated width
+    } else {
+      // For 'top' or 'bottom' anchors, width is 100% and height is controlled
+      return { height: height, width: '100%' };
+    }
+  }, [anchor, calculatedWidth, height]);
+
+  return (
+    <Drawer
+      anchor={anchor}
+      open={open}
+      onClose={onClose}
+      // Allows closing with Escape key, but prevents closing by clicking outside if ModalProps.disableBackdropClick is true
+      disableEscapeKeyDown={false}
+      ModalProps={{
+        // Keep mounted for better performance if content is complex or needs to retain state
+        keepMounted: true,
+      }}
+    >
+      <Box
+        sx={{
+          ...contentStyle, // Apply calculated width/height
+          display: 'flex',
+          flexDirection: 'column',
+          p: 2, // Padding around the content
+          backgroundColor: (theme) => theme.palette.background.paper, // Use theme background color
+          color: (theme) => theme.palette.text.primary, // Use theme text color
+          height: '100%', // Ensure the main container of the Drawer takes full height
+        }}
+        role="presentation" // ARIA role for accessibility
+      >
+        {/* Header section with title and close button */}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: 2, // Margin bottom for separation from content
+            flexShrink: 0, // Prevent the header from shrinking when content scrolls
+          }}
+        >
+          {title && (
+            <Typography variant="h6" component="div" sx={{ fontWeight: 'bold' }}>
+              {title}
+            </Typography>
+          )}
+          <IconButton onClick={onClose} sx={{ ml: 'auto' }}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+
+        <Divider sx={{ mb: 2 }} /> {/* Separator line */}
+
+        {/* Scrollable content area */}
+        <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
+          {children}
+        </Box>
+      </Box>
+    </Drawer>
+  );
+};
+
+export default Flyout;

package/src/components/Flyout/index.ts

@@ -0,0 +1 @@
+export { default as Flyout } from './Flyout';

package/src/components/Gallery/Gallery.definition.tsx

@@ -0,0 +1,37 @@
+export const DefaultGalleryDefinition = `
+<Gallery
+  maxWidth="600px"
+  items={[
+    {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+      title: "Image 1",
+      thumbnail: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+    },
+    {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1511765224389-37f0e77cf0eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+      title: "Image 2",
+      thumbnail: "https://images.unsplash.com/photo-1511765224389-37f0e77cf0eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+    },
+    {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1500534623283-312aade485b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+      title: "Image 3",
+      thumbnail: "https://images.unsplash.com/photo-1500534623283-312aade485b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+    },
+    {
+      type: "video",
+      url: "https://www.w3schools.com/html/mov_bbb.mp4",
+      title: "Video 1",
+      thumbnail: "https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
+    },
+    {
+      type: "image",
+      url: "https://images.unsplash.com/photo-1494526585095-c41746248156?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+      title: "Image 4",
+      thumbnail: "https://images.unsplash.com/photo-1494526585095-c41746248156?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+    }
+  ]}
+/>
+`.trim();

package/src/components/Gallery/Gallery.stories.tsx

@@ -0,0 +1,82 @@
+import Gallery from "./Gallery";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DefaultGalleryDefinition } from "./Gallery.definition";
+
+const meta: Meta<typeof Gallery> = {
+    title: "Components/Gallery",
+    component: Gallery,
+    parameters: {
+        layout: "centered"
+    },
+    tags: ["autodocs"]
+};
+
+export default meta;
+
+
+type Story = StoryObj<typeof Gallery>;
+
+
+export const Default: Story = {
+    args: {
+        maxWidth: "600px",
+        items: [
+            {
+                type: "image",
+                url: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+                title: "Image 1",
+                thumbnail: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+            },
+            {
+                type: "image",
+                url: "https://images.unsplash.com/photo-1511765224389-37f0e77cf0eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+                title: "Image 2",
+                thumbnail: "https://images.unsplash.com/photo-1511765224389-37f0e77cf0eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+            },
+            {
+                type: "image",
+                url: "https://images.unsplash.com/photo-1500534623283-312aade485b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+                title: "Image 3",
+                thumbnail: "https://images.unsplash.com/photo-1500534623283-312aade485b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+            },
+            {
+                type: "video",
+                url: "https://www.w3schools.com/html/mov_bbb.mp4",
+                title: "Video 1",
+                thumbnail: "https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
+            },
+            {
+                type: "image",
+                url: "https://images.unsplash.com/photo-1494526585095-c41746248156?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
+                title: "Image 4",
+                thumbnail: "https://images.unsplash.com/photo-1494526585095-c41746248156?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+            },
+
+
+        ]
+    },
+    render: (args) => (
+
+        <Gallery {...args} />
+
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: "Ejemplo básico de Gallery, permite ver imagenes y videos"
+            },
+            source: {
+                code: DefaultGalleryDefinition
+            },
+            argTypes: {
+                maxWidth: { description: 'Permite ajustar el maxwidht de el componente gallery' },
+                items: { control: false, description: `Array de objetos con la información de las imágenes y videos a mostrar, la estructura de los objetos es la siguiente : {
+                    type: "image" | "video",
+                    url: string,
+                    title: string,
+                    thumbnail: string
+                }` }
+            }
+        }
+    }
+};

package/src/components/Gallery/Gallery.tsx

@@ -0,0 +1,158 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Stack, useMediaQuery } from '@mui/material';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles';
+
+import { GalleryThumbnails } from './GalleryThumbnails';
+import { GalleryMain } from './GalleryMain';
+import { GalleryLightbox } from './GalleryLightbox';
+import { resolvePreset } from '../_shared/resolvePreset';
+
+// ── Tipos de dominio ─────────────────────────────────────────────────────
+export interface GalleryItem {
+  url: string;
+  /**
+   * Tipo del item. Los literales `"image"` / `"video"` activan el render
+   * específico; cualquier otro string se trata como imagen por default.
+   */
+  type: 'image' | 'video' | (string & {});
+  title: string;
+  /** Si no se provee, se usa `url` como thumbnail. */
+  thumbnail?: string;
+}
+
+export interface GalleryProps {
+  items: GalleryItem[];
+  /** Ancho máximo del contenedor. Default: `'600px'`. */
+  maxWidth?: string | number;
+  /**
+   * Nombre del preset de estilo registrado en `theme.styles.Gallery`.
+   * - `"default"` (o ausente) = estilo built-in del paquete.
+   */
+  preset?: string;
+  /** sx del contenedor raíz. Se mergea después del preset. */
+  sx?: SxProps<Theme>;
+  className?: string;
+}
+
+export const Gallery: React.FC<GalleryProps> = ({
+  items,
+  maxWidth = '600px',
+  preset,
+  sx,
+  className,
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width:700px)');
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [openLightbox, setOpenLightbox] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  const [thumbStartIdx, setThumbStartIdx] = useState(0);
+  const THUMB_VISIBLE_COUNT = isMobile ? 3 : 5;
+
+  const handleThumbUp = () => {
+    setThumbStartIdx((prev) => Math.max(0, prev - 1));
+  };
+  const handleThumbDown = () => {
+    setThumbStartIdx((prev) =>
+      Math.max(0, Math.min(items.length - THUMB_VISIBLE_COUNT, prev + 1)),
+    );
+  };
+
+  const handlePrev = () => {
+    setSelectedIdx((idx) => (idx === 0 ? items.length - 1 : idx - 1));
+  };
+  const handleNext = () => {
+    setSelectedIdx((idx) => (idx === items.length - 1 ? 0 : idx + 1));
+  };
+
+  useEffect(() => {
+    if (!openLightbox) return;
+    const handleKey = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowLeft':
+          handlePrev();
+          break;
+        case 'ArrowRight':
+          handleNext();
+          break;
+        case 'Escape':
+          setOpenLightbox(false);
+          break;
+      }
+    };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [openLightbox, items.length]);
+
+  // Reset zoom/rotación al navegar o abrir. Autoplay del video con catch
+  // para evitar unhandled rejections por políticas de autoplay del browser.
+  useEffect(() => {
+    if (
+      openLightbox &&
+      items[selectedIdx]?.type === 'video' &&
+      videoRef.current
+    ) {
+      videoRef.current.currentTime = 0;
+      videoRef.current.play().catch(() => {
+        /* autoplay bloqueado — el usuario puede dar play manualmente */
+      });
+    }
+    setZoom(1);
+    setRotation(0);
+  }, [openLightbox, selectedIdx, items]);
+
+  if (!items || items.length === 0) return null;
+
+  const safeSelectedIdx = Math.max(0, Math.min(selectedIdx, items.length - 1));
+  const currentItem = items[safeSelectedIdx];
+
+  const presetSx = resolvePreset('Gallery', preset, theme);
+
+  const rootSx: SxProps<Theme> = [
+    { maxWidth, mx: 'auto', minHeight: 300 },
+    ...(presetSx ? [presetSx] : []),
+    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+  ];
+
+  return (
+    <Stack
+      direction={isMobile ? 'column' : 'row'}
+      gap={3}
+      className={className}
+      sx={rootSx}
+    >
+      <GalleryThumbnails
+        items={items}
+        selectedIdx={safeSelectedIdx}
+        onSelect={setSelectedIdx}
+        thumbStartIdx={thumbStartIdx}
+        visibleCount={THUMB_VISIBLE_COUNT}
+        onThumbUp={handleThumbUp}
+        onThumbDown={handleThumbDown}
+        isMobile={isMobile}
+      />
+      <GalleryMain
+        item={currentItem}
+        onOpenLightbox={() => setOpenLightbox(true)}
+        isMobile={isMobile}
+      />
+      <GalleryLightbox
+        open={openLightbox}
+        onClose={() => setOpenLightbox(false)}
+        item={currentItem}
+        onPrev={handlePrev}
+        onNext={handleNext}
+        zoom={zoom}
+        setZoom={setZoom}
+        rotation={rotation}
+        setRotation={setRotation}
+        videoRef={videoRef}
+      />
+    </Stack>
+  );
+};
+
+export default Gallery;

package/src/components/Gallery/GalleryLightbox.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogActions,
+  Stack,
+  IconButton,
+  Box,
+  Typography,
+} from '@mui/material';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+import RotateRightIcon from '@mui/icons-material/RotateRight';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { Button } from '../Button';
+import type { GalleryItem } from './Gallery';
+
+const ZOOM_MIN = 0.25;
+const ZOOM_MAX = 5;
+const ZOOM_STEP = 0.25;
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  item: GalleryItem;
+  onPrev: () => void;
+  onNext: () => void;
+  zoom: number;
+  setZoom: React.Dispatch<React.SetStateAction<number>>;
+  rotation: number;
+  setRotation: React.Dispatch<React.SetStateAction<number>>;
+  videoRef?: React.RefObject<HTMLVideoElement | null>;
+}
+
+export const GalleryLightbox = ({
+  open,
+  onClose,
+  item,
+  onPrev,
+  onNext,
+  zoom,
+  setZoom,
+  rotation,
+  setRotation,
+  videoRef,
+}: Props) => (
+  <Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
+    <DialogContent
+      sx={{
+        minHeight: 431,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        width="100%"
+      >
+        <IconButton onClick={onPrev} aria-label="Anterior">
+          <ArrowBackIosNewIcon />
+        </IconButton>
+        <Typography
+          variant="subtitle1"
+          fontWeight={600}
+          sx={{ flex: 1, textAlign: 'center' }}
+        >
+          {item.title}
+        </Typography>
+        <IconButton onClick={onNext} aria-label="Siguiente">
+          <ArrowForwardIosIcon />
+        </IconButton>
+      </Stack>
+
+      {item.type === 'video' ? (
+        <Box
+          component="video"
+          key={item.url}
+          ref={videoRef}
+          src={item.url}
+          controls
+          autoPlay
+          sx={{
+            width: '100%',
+            maxWidth: 900,
+            maxHeight: '70vh',
+            objectFit: 'contain',
+            bgcolor: 'common.black',
+            borderRadius: 1,
+          }}
+        />
+      ) : (
+        <Box
+          component="img"
+          src={item.url}
+          alt={item.title}
+          sx={{
+            transform: `scale(${zoom}) rotate(${rotation}deg)`,
+            transition: 'transform 0.2s ease',
+            width: '100%',
+            maxWidth: 900,
+            maxHeight: '70vh',
+            objectFit: 'contain',
+            borderRadius: 1,
+          }}
+        />
+      )}
+    </DialogContent>
+
+    <DialogActions
+      sx={{
+        display: 'flex',
+        justifyContent: item.type === 'image' ? 'space-between' : 'end',
+        flexWrap: 'wrap',
+        gap: 1,
+      }}
+    >
+      {item.type === 'image' && (
+        <>
+          <Stack direction="row" spacing={1}>
+            <Button
+              variant="outlined"
+              startIcon={<ZoomInIcon />}
+              onClick={() => setZoom((z) => Math.min(ZOOM_MAX, z + ZOOM_STEP))}
+              disabled={zoom >= ZOOM_MAX}
+            >
+              Zoom +
+            </Button>
+            <Button
+              variant="outlined"
+              startIcon={<ZoomOutIcon />}
+              onClick={() => setZoom((z) => Math.max(ZOOM_MIN, z - ZOOM_STEP))}
+              disabled={zoom <= ZOOM_MIN}
+            >
+              Zoom −
+            </Button>
+          </Stack>
+          <Stack direction="row" spacing={1}>
+            <Button
+              variant="outlined"
+              aria-label="Rotar a la izquierda"
+              onClick={() => setRotation((r) => (r - 90) % 360)}
+            >
+              <RotateLeftIcon />
+            </Button>
+            <Button
+              variant="outlined"
+              aria-label="Rotar a la derecha"
+              onClick={() => setRotation((r) => (r + 90) % 360)}
+            >
+              <RotateRightIcon />
+            </Button>
+          </Stack>
+          <Button
+            variant="outlined"
+            startIcon={<RestartAltIcon />}
+            onClick={() => {
+              setZoom(1);
+              setRotation(0);
+            }}
+          >
+            Reset
+          </Button>
+        </>
+      )}
+      <Button
+        variant="contained"
+        startIcon={<CloseIcon />}
+        onClick={onClose}
+      >
+        Cerrar
+      </Button>
+    </DialogActions>
+  </Dialog>
+);
+
+export default GalleryLightbox;

package/src/components/Gallery/GalleryMain.tsx

@@ -0,0 +1,87 @@
+import { Box, IconButton } from '@mui/material';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+
+import type { GalleryItem } from './Gallery';
+
+interface Props {
+  item: GalleryItem;
+  onOpenLightbox: () => void;
+  isMobile: boolean;
+}
+
+export const GalleryMain = ({ item, onOpenLightbox, isMobile }: Props) => (
+  <Box
+    sx={{
+      width: isMobile ? '80%' : '100%',
+      maxHeight: 431,
+      maxWidth: isMobile ? '80%' : '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      borderRadius: 1,
+      bgcolor: 'grey.100',
+      overflow: 'hidden',
+      mx: 'auto',
+    }}
+  >
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      onClick={onOpenLightbox}
+    >
+      {item.type === 'video' ? (
+        <Box
+          component="video"
+          controls
+          src={item.url}
+          sx={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+            bgcolor: 'common.black',
+            borderRadius: 1,
+          }}
+        />
+      ) : (
+        <Box
+          component="img"
+          src={item.url}
+          alt={item.title}
+          sx={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+            borderRadius: 1,
+          }}
+        />
+      )}
+    </Box>
+    <IconButton
+      onClick={(e) => {
+        e.stopPropagation();
+        onOpenLightbox();
+      }}
+      aria-label="Abrir en pantalla completa"
+      sx={{
+        position: 'absolute',
+        top: 16,
+        right: 16,
+        bgcolor: 'primary.main',
+        color: 'primary.contrastText',
+        '&:hover': { bgcolor: 'primary.dark' },
+        boxShadow: 2,
+      }}
+    >
+      <FullscreenIcon />
+    </IconButton>
+  </Box>
+);
+
+export default GalleryMain;