@soyfri/shared-library 2.0.0-beta.21 → 2.0.0-beta.23

package/src/components/Flyout/Flyout.tsx

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

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

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

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

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

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

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

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